Auf Änderungen bei der Größe des Darstellungsbereichs in Chrome unter Android vorbereiten

Bramus

Im November, mit der Veröffentlichung von Chrome 108, werden einige Änderungen am Verhalten des Layout-Viewports vorgenommen, wenn die Bildschirmtastatur angezeigt wird. Durch diese Änderung wird in Chrome für Android nicht mehr der Layout-Darstellungsbereich, sondern nur noch der visuelle Darstellungsbereich angepasst. Dadurch entspricht Chrome unter Android dem Verhalten von Chrome unter iOS und Safari unter iOS.

Im Folgenden finden Sie weitere Informationen dazu, was genau passiert, warum diese Änderung in Chrome vorgenommen wird und wie Sie sich darauf vorbereiten können.

Layout- und visueller Darstellungsbereich

Wenn Sie eine Website besuchen, sehen Sie nach dem Laden nicht den gesamten Inhalt der Seite. Stattdessen bietet der Browser einen Darstellungsbereich, über den Sie einen Teil der Seite sehen. Dieser Ansichtsbereich wird auch als Layout-Ansichtsbereich bezeichnet. Wenn der Inhalt einer Seite zu groß wird, bietet der Browser einen Scrollmechanismus.

Visualisierung des Layout-Viewports (blauer Umriss) in einem Browser.
Visualisierung des Darstellungsbereichs des Layouts (blauer Umriss) in einem Desktop-Browser.

Wenn Sie Elemente mit position: fixed positionieren, werden sie anhand dieses Layout-Viewports angeordnet. Da der Layout-Betrachter beim Scrollen auf einer Seite an seiner Position bleibt, bleiben auch Elemente, für die position: fixed verwendet wird, an ihrer Position.

Visualisierung des Layout-Darstellungsbereichs (blauer Umriss) in mobilen Browsern mit jeweils zwei Elementen, die mit „position: fixed“ (blaue Felder) angeordnet sind.
Visualisierung des Layout-Viewports (blauer Umriss) in mobilen Browsern mit jeweils zwei Elementen, die mit position: fixed (blaue Felder) angeordnet sind. Die Abbildung zeigt (von links nach rechts) Safari auf dem iPhone, Chrome unter Android und Firefox auf Android.

Neben diesem Layout-Viewport bietet der Browser auch einen visuellen Darstellungsbereich. Er stellt den Teil des Darstellungsbereichs dar, der derzeit sichtbar ist. Bei Zoomstufe 1 ist dieser visuelle Darstellungsbereich so groß wie der Layout-Darstellungsbereich.

Visualisierung des visuellen Darstellungsbereichs (orangefarbene Umrandung)
Visualisierung des visuellen Ansichtsbereichs (orangefarbener Umriss).

Wenn Sie heranzoomen, verkleinern Sie den visuellen Darstellungsbereich im Verhältnis zum Layout-Darstellungsbereich.

Visualisierung des visuellen Darstellungsbereichs auf einer Seite, die durch Zusammenziehen der Finger gezoomt wurde. Beachten Sie, dass der visuelle Darstellungsbereich innerhalb des Layout-Darstellungsbereichs enthalten ist.
Visualisierung des visuellen Darstellungsbereichs (orangefarbener Umriss) auf einer Seite mit zwei Fingern. Beachten Sie, dass der visuelle Darstellungsbereich innerhalb des Layout-Darstellungsbereichs enthalten ist.

Verhalten beim Ändern der Größe des Darstellungsbereichs

Wenn Sie den Fokus auf ein Eingabefeld oder einen anderen bearbeitbaren Bereich legen, wird auf Geräten – meist mit Touchscreen – möglicherweise eine Bildschirmtastatur angezeigt. Diese Tastatur, die oft als virtuelle Tastatur bezeichnet wird, ermöglicht es Nutzern, Inhalte in den bearbeitbaren Bereich einzugeben.

Wenn dies geschieht, reagieren die Browser auf eine der folgenden Arten in Bezug auf die verschiedenen Darstellungsbereiche:

  • Ändern Sie nur die Größe des visuellen Darstellungsbereichs und verschieben Sie den Layout-Darstellungsbereich.
  • Passen Sie die Größe des visuellen Darstellungsbereichs und des Layoutdarstellungsbereichs an.
  • Ändern Sie nicht die Größe des Layout-Darstellungsbereichs oder des visuellen Darstellungsbereichs, indem Sie die Bildschirmtastatur über beide Bereiche legen.

Diese drei Verhaltensweisen werden so visualisiert:

Visualisierung aller drei genannten Verhaltensweisen nebeneinander.
Visualisierung aller drei genannten Verhaltensweisen nebeneinander. Zu sehen sind Safari auf iOS (links) und Chrome auf Android (Mitte und rechts).

Je nachdem, welche Kombination aus Browser und Betriebssystem ein Besucher verwendet, wird eines der Verhaltensweisen verwendet, was außerhalb Ihrer Kontrolle liegt.

Zuordnung der verschiedenen Verhaltensweisen zur Größenanpassung

Im Rahmen der Viewport Investigation Effort (Viewport-Untersuchung) im Rahmen von Interop 2022 wurden verschiedene Viewport-bezogene Aspekte für alle gängigen Browser- und Betriebssystemkombinationen untersucht.

Einer der getesteten Aspekte ist das Verhalten beim Ändern der Größe, wenn die On-Screen-Tastatur angezeigt wird. Dies führte zur folgenden Klassifizierung:

Gruppe 1

Browser, die die Größe des visuellen Darstellungsbereichs ändern, den Layout-Darstellungsbereich aber unverändert lassen

  • Safari auf iOS-Geräten
  • Safari unter iPadOS
  • Chrome unter ChromeOS
  • Chrome unter iOS
  • Chrome unter iPadOS
  • Edge für iOS
  • Edge unter iPadOS

Gruppe 2

Browser, die sowohl den visuellen als auch den Layout-Darstellungsbereich ändern.

  • Chrome für Android
  • Firefox für Android
  • Edge auf Android
  • Firefox für iOS

Gruppe 3

Browser, die die Größe von keinem Darstellungsbereich anpassen:

  • Standardmäßig keine. In Chrome für Android können Sie dieses Verhalten über die VirtualKeyboard API aktivieren.

Nebenwirkungen der einzelnen Verhaltensweisen

Dieser Unterschied bei der Größenänderung der verschiedenen Ansichten, wenn die On-Screen-Tastatur angezeigt wird, führt zu einem nicht interoperablen Layout und Größenverhalten von Websites.

In den Browsern aus Gruppe 1, in denen die Onscreen-Tastatur angezeigt wird:

  • Die berechneten Werte für viewport-relative Einheiten bleiben gleich.
  • Elemente, die den gesamten visuellen Bereich einnehmen sollen, behalten ihre Größe.
  • Elemente, für die position: fixed verwendet wird, bleiben an Ort und Stelle und können von der On-Screen-Tastatur verdeckt werden.

In den Browsern aus Gruppe 2, in denen die Onscreen-Tastatur angezeigt wird:

  • Die berechneten Werte für viewportbezogene Einheiten schrumpfen.
  • Elemente, die den gesamten visuellen Bereich einnehmen sollen, werden verkleinert.
  • Elemente, für die position: fixed verwendet wird, können sich an anderer Stelle im Layout befinden.
Visualisierung der Nebenwirkungen in beiden Gruppen. Beachten Sie die unterschiedliche Position der Elemente, für die „position: fixed“ verwendet wird (blaue Felder).
Visualisierung der Nebenwirkungen in beiden Gruppen. Beachten Sie die unterschiedlichen Positionen der Elemente, für die position: fixed verwendet wird (blaue Felder). Zu sehen sind Safari unter iOS (links) und Chrome unter Android (in der Mitte und rechts).

Sofern Sie nicht auf User-Agent-Sniffing oder umfangreiches Scripting zurückgreifen, können Sie nicht wissen, welches Verhalten verwendet wird. Sie können das Verhalten auch nicht ändern, da es von der Kombination aus Browser und Betriebssystem des Nutzers abhängt.

Standardverhalten in Chrome 108 ändern

Ab Chrome 108 wird das Verhalten zur Größenanpassung des Darstellungsbereichs in Chrome unter Android so angepasst, dass die Größe des Layout-Darstellungsbereichs nicht mehr angepasst wird, wenn die Bildschirmtastatur eingeblendet wird.

Dadurch wird das Verhalten von Chrome unter Android an das von Chrome unter iOS, iPadOS, Windows und CrOS, Safari unter iOS und iPadOS und Edge unter iOS, iPadOS und Windows angepasst.

Dank dieser Änderung können Autoren erkennen, welches Verhalten verwendet wird – unabhängig davon, auf welchem Betriebssystem Chrome ausgeführt wird. Darüber hinaus ermöglicht es stabile, relative Einheiten des Darstellungsbereichs: Das Anzeigen oder Ausblenden des OSK hat keine Auswirkungen auf diese Einheiten.

Anderes Verhalten aktivieren

Wenn Sie das Größenänderungsverhalten vor Version 108 für Ihre Website verwenden möchten, ist das kein Problem. In Chrome 108 wird außerdem eine Erweiterung des Darstellungsbereich-Meta-Tags eingeführt.

Mit der Taste interactive-widget können Sie Chrome mitteilen, wie die Größe geändert werden soll.

Zulässige Werte für interactive-widget sind:

  • resizes-visual: Nur den visuellen Darstellungsbereich, nicht den Layout-Darstellungsbereich, ändern.
  • resizes-content: Ändern Sie die Größe sowohl des visuellen als auch des Layout-Darstellungsbereichs.
  • overlays-content: Ändern Sie die Größe der Darstellung nicht.

Wenn Sie das alte Chrome-Verhalten auf Android-Geräten wieder aktivieren möchten, legen Sie das Viewport-Meta-Tag so fest:

<meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=resizes-content">

Wenn Sie interactive-widget nicht in das Meta-Tag „viewport“ einfügen, verwendet Chrome das Standardverhalten, also resizes-visual.

In der Visualisierung wirken sich die Einstellungen wie folgt auf die verschiedenen Darstellungsbereiche aus:

Visueller Vergleich aller drei Werte in Chrome 108 unter Android. Von links nach rechts: Größenänderungs-, Bild- und Inhaltsgrößenanpassung und Overlay-Inhalte
Visueller Vergleich aller drei Werte in Chrome 108 für Android. Von links nach rechts: resizes-visual, resizes-content und overlays-content.

Auf dieser Demowebsite können Sie die Auswirkungen der einzelnen Werte in Ihrem Browser ausprobieren.

Tests und Feedback

Wir gehen davon aus, dass es bei bestehenden Websites zu einigen geringfügigen Unterschieden kommt. Diese sollten jedoch nicht störend sein, da sich Chrome 108 auf Android-Geräten jetzt ähnlich wie Safari auf iOS verhält. Websites, die in Safari auf iOS einwandfrei funktionieren, sollten daher auch in Chrome 108 auf Android einwandfrei funktionieren.

Wir empfehlen Websiteinhabern jedoch, ihre Websites aktiv in Chrome 108 zu testen. Chrome 108 befindet sich seit dem 27. Oktober 2022 in der Betaphase. Achten Sie insbesondere auf Elemente, die position: fixed verwenden und/oder auf Darstellungsbereich-relative Einheiten angewiesen sind.

Feedback kann unter crbug.com gemeldet werden. Geben Sie im Titel des Berichts unbedingt „On-Screen-Tastatur“ an.

Zusätzliche Ressourcen