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

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 wird das Verhalten von Chrome für Android dem von Chrome für iOS und Safari für iOS angeglichen.

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 Layout-Viewports (blauer Umriss) in einem Desktop-Browser.

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

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 Kästchen) angeordnet sind. Zu sehen sind (von links nach rechts) Safari auf dem iPhone, Chrome auf 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 (orangefarbener Umriss).
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. Der visuelle Darstellungsbereich ist im Layout-Darstellungsbereich enthalten.
Visualisierung des visuellen Darstellungsbereichs (orangefarbener Umriss) auf einer Seite, die durch Zusammenziehen der Finger gezoomt wurde. Der visuelle Darstellungsbereich ist im Layout-Darstellungsbereich enthalten.

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. Über diese Tastatur, die oft als virtuelle Tastatur bezeichnet wird,können Nutzer Inhalte in den bearbeitbaren Bereich eingeben.

Dabei reagieren Browser in Bezug auf die verschiedenen Ansichten auf eine der folgenden Arten:

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

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.

Die verschiedenen Größenänderungsmechanismen zuordnen

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 auf 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 der Darstellungsbereiche nicht ändern:

  • 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 On-Screen-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 auf iOS (links) und Chrome auf Android (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 passt Chrome für Android das Verhalten beim Ändern der Größe des Darstellungsbereichs an, sodass der Layout-Darstellungsbereich nicht mehr verkleinert wird, wenn die Bildschirmtastatur angezeigt wird.

Dadurch wird das Verhalten von Chrome auf Android mit dem von Chrome auf iOS, iPadOS, Windows und ChromeOS, Safari auf iOS und iPadOS sowie Edge auf iOS, iPadOS und Windows angeglichen.

Dank dieser Änderung können Entwickler unabhängig vom Betriebssystem, unter dem Chrome ausgeführt wird, wissen, welches Verhalten verwendet wird. Außerdem ermöglicht es stabile viewport-relative Einheiten: Das Ein- oder Ausblenden der Bildschirmtastatur 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.

Die Einstellungen haben folgende Auswirkungen auf die verschiedenen Ansichten:

Visueller Vergleich aller drei Werte in Chrome 108 auf Android Von links nach rechts: „resizes-visual“, „resizes-content“ und „overlays-content“.
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 Website-Betreibern jedoch, ihre Websites aktiv in Chrome 108 zu testen, das ab dem 27. Oktober 2022 in der Betaphase ist. Achten Sie insbesondere auf Elemente, die position: fixed und/oder viewportbezogene Einheiten verwenden.

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

Zusätzliche Ressourcen