Gelöst: Portrait Darstellung und Text-Eingabefelder in Android Browsern

Wenn eine Website responsive ist und im Portrait- und Landscape-Modus unterschiedlich dargestellt wird, kann es zu Darstellungsfehlern kommen, wenn in Android Browsern Texteingabefelder benutzt werden. Das liegt daran, dass Die virtuelle Tastatur in Android den Viewport des Browsers beeinflusst, anstatt die Tastatur über den Browser zu legen, so wie es z.B. in anderen mobilen Betriebssystemen der Fall ist. Der Browser wertet dies als Neujustierung der Höhe und der Breite des Browserfensters und führt dann die entsprechenden Media Queries aus. Dies führt mitunter dazu, dass die Seite dann im Landscape-Modus angezeigt wird, obwohl dies nicht beabsichtigt ist. Wir zeigen Ihnen im Folgenden einen Lösungsansatz für dieses Problem.

Was ist die Orientierung ?

Zunächst muss man sich bewusst machen, wie der Browser die Orientierung des Fensters ableitet. Dies ist viel einfacher, als man denkt. Im Prinzip geht es hier nur um das Verhältnis zwischen Höhe und Breite des Viewports. Ist die Höhe größer als die Breite, wird dies als Portrait-Modus definiert, ist die Breite jedoch größer als die Höhe, so erkennt dies der Browser als Landscape-Modus.

Problem

Wie man sich nun vorstellen kann, ändert sich durch das Einblenden der Tastatur in Android das Verhältnis zwischen Höhe und Breite. Wenn die Website vormals höher als breit war, ist dies nun genau umgekehrt. Die Media Queries für den Landscape-Modus greifen sofort und die Darstellung der Seite ändert sich. Leider kann man dem auch nicht auf einfachem Wege mit JavaScript vorbeugen, da das Event „window.orientationchange“ schon abgefeuert wird, bevor die Werte für „innerWidth“ und „innerHeight“ geupdated wurden. Somit kann sich nicht auf die geänderten Werte beziehen. Abgesehen davon ist es aus programmiertechnischer Sicht besser den Style vom Code zu trennen und das ganze auch mit CSS abzuwickeln, wenn dies möglich ist. Und zum Glück ist dies der Fall.

Lösung

Wie bereits besprochen, dreht sich alles um das Verhältnis zwischen Höhe und Breite. In CSS wird dies auch mit der Eigenschaft „aspect-ratio“ angegeben. Dabei sind die Eigenschaften „orientation: landscape“ und „orientation: portrait“ nichts anderes als Abkürzungen für bestimmte aspect-ratio Werte.

@media screen and (orientation: landscape)

ist also exakt das gleiche wie

@media screen and (min-aspect-ratio: 1/1)

was nichts anderes bedeutet als „Wenn die Breite größer ist, als die Höhe“.
Andersherum funktioniert dies natürlich auch:

@media screen and (orientation: portrait)

ist nichts anderes als

@media screen and (max-aspect-ratio: 1/1)

was nichts anderes bedeutet als „Wenn die Breite kleiner ist, als die Höhe“.

Der Vorteil der Nutzung der aspect-ratio Eigenschaft liegt auf der Hand. Wir können hier selbst das Verhältnis von Höhe zu Breite bestimmen und genau das hilft uns in diesem Fall auch. Wir möchten nämlich, dass die entsprechenden Media-Queries für den landscape-Modus erst greifen, wenn ein bestimmtes Verhältnis zwischen Breite und Höhe vorliegt. Aber wie berechnet an dieses Verhältnis ? Ganz einfach: Angenommen die virtuelle Tastatur des Android-Browsers ist bereits ausgefahren und die nun verbleibende Höhe der Website ist 250 Pixel, die Breite beträgt jedoch 360 Pixel. Dann ist dies ein Verhältnis von 360 zu 250 oder 360/250, da man zuerst immer den Wert der Breite nimmt und danach den Wert für die Höhe. Nun könnten wir unseren Media-Query für den Portrait-Modus wie folgt anpassen:

@media screen and (max-aspect-ratio: 360/250)

Das würde dann aber nur für genau dieses Größenverhältnis funktionieren und das ist relativ ungünstig. Es soll ja schließlich auch mit anderen Geräten funktionieren. Rechnet man 360/250 erhält man 1,44. Einfacher kann man dies auch mit 13/9 abbilden und gleichzeitig ist diese Schreibweise breiter anwendbar. Wir schreiben also:

@media screen and (max-aspect-ratio: 13/9) { 
/* Angaben für den Portrait-Modus /*
}

Dieses Größenverhältnis findet für die meisten Geräte anwendung, da die Tastatur immer so weit geöffnet wird, dass meist genau dieses Verhältnis von Höhe und Breite eintritt. Probieren Sie es einfach aus. Sollte es nicht auf Anhieb funktionieren, experimentieren Sie ein bisschen mit den Werten. Natürlich können Sie diese Eigenschaften mit anderen Kombinieren, z.B.:

@media screen and (max-width: 400px)
              and (max-aspect-ratio: 13/9) { 
/* Angaben für den Portrait-Modus /*
}

So können Sie auch Ihre bestehenden Media-Queries anpassen, die bis jetzt nur auf die Breite geprüft haben.

Wir hoffen, wir konnten Ihnen weiterhelfen, falls Sie auch mit diesem Problem zu kämpfen hatten. Falls nicht, erinnern Sie sich vielleicht einmal in Zukunft daran, wenn Ihr responsive Design sie zur Weißglut treibt. Natürlich ist dies keine universell einsetzbare Lösung und kann wahrscheinlich nicht in jedem Einzelfall angewendet werden. Zumindest sollte Ihnen die Thematik aber nun besser bekannt sein, sodass Sie eventuell Ihre eigene Lösung daraus ableiten können.

1 Antwort
  1. Joachim
    Joachim sagte:

    Eine wirklich gut verständliche Erklärung wie man mit aspect-ratio sehr flexible Seite aufbauen kann. Besten dank dafür und weiter so!

    Antworten

Dein Kommentar

An Diskussion beteiligen?
Hinterlasse uns Deinen Kommentar!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert