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

Bramus

Mit der Einführung von Chrome 108 werden im November einige Änderungen am Layout-Darstellungsbereich vorgenommen, wenn die Bildschirmtastatur (OSK) angezeigt wird. Mit dieser Änderung wird die Größe des Layout-Darstellungsbereichs in Chrome unter Android nicht mehr angepasst. Stattdessen wird nur die Größe des visuellen Darstellungsbereichs geändert. Dadurch wird das Verhalten von Chrome unter Android an das von Chrome unter iOS und Safari unter iOS angeglichen.

Im Folgenden finden Sie Hintergrundinformationen dazu, warum diese Änderung in Chrome vorgenommen wird und was Sie tun können, um sich darauf vorzubereiten.

Der Layout-Darstellungsbereich und der visuelle Darstellungsbereich

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

Visualisierung des Layout-Darstellungsbereichs (blauer Umriss) in einem Browser
Visualisierung des Layout-Darstellungsbereichs (blaue Umrandung) in einem Desktop-Browser.

Wenn Sie Elemente mit position: fixed positionieren, werden sie im Darstellungsbereich des Layouts angeordnet. Wenn Sie auf einer Seite nach unten scrollen, bleibt der Layout-Darstellungsbereich an Ort und Stelle. Dies gilt auch für Elemente, für die position: fixed verwendet wird.

Visualisierung des Layout-Darstellungsbereichs (blauer Umriss) in mobilen Browsern mit jeweils zwei Elementen, die über „position: fixed“ (blaue Kästchen) angeordnet sind.
Visualisierung des Layout-Darstellungsbereichs (blaue Umrandung) in mobilen Browsern, jeweils mit zwei Elementen, die mit position: fixed (blauen Rahmen) angeordnet sind. Zu sehen sind (von links nach rechts) Safari auf dem iPhone, Chrome unter Android und Firefox unter Android.

Zusätzlich zu diesem Layout-Darstellungsbereich bietet der Browser auch einen visuellen Darstellungsbereich. Sie 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 Darstellungsbereichs (orangefarbener Umriss).

Beim Heranzoomen durch Auseinander- und Zusammenziehen der Finger wird der visuelle Darstellungsbereich bezogen auf den Darstellungsbereich für das Layout verkleinert.

Visualisierung des visuellen Darstellungsbereichs auf einer Seite, deren Größe durch Auseinander- und Zusammenziehen der Finger gezoomt wird Wie Sie sehen, ist der visuelle Darstellungsbereich im Darstellungsbereich „Layout“ enthalten.
Visualisierung des visuellen Darstellungsbereichs (orangefarbener Umriss) auf einer Seite, die durch Auseinander- und Zusammenziehen der Finger gezoomt wird. Wie Sie sehen, ist der visuelle Darstellungsbereich im Darstellungsbereich „Layout“ enthalten.

Verhalten bei der Größenanpassung des Darstellungsbereichs

Wenn Sie den Fokus auf eine Eingabe oder einen anderen bearbeitbaren Bereich legen, kann auf Geräten – meistens mit Touchscreen-Geräten – eine Bildschirmtastatur angezeigt werden. Mit dieser Bildschirmtastatur können Nutzer Inhalte in den bearbeitbaren Bereich eingeben.

Dabei reagieren Browser abhängig von den verschiedenen Darstellungsbereichen auf eine der folgenden Arten:

  • Ä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 Layout-Darstellungsbereichs an.
  • Ändern Sie nicht die Größe des Layout-Darstellungsbereichs oder des visuellen Darstellungsbereichs, indem Sie die Bildschirmtastatur über beiden anzeigen.

Diese drei Verhaltensweisen werden so visualisiert:

Visualisierung aller drei genannten Verhaltensweisen nebeneinander.
Visualisierung aller drei genannten Verhaltensweisen gegenübergestellt. Zu sehen sind Safari unter iOS (links) und Chrome unter Android (in der Mitte und rechts).

Je nachdem, welche Kombination aus Browser und Betriebssystem ein Besucher verwendet, wird eine dieser Verhaltensweisen angewendet, auf die Sie keinen Einfluss haben.

Verschiedene Verhaltensweisen zur Größenanpassung zuordnen

Im Viewport Investigation Effort-Teil von Interop 2022 wurden verschiedene Aspekte des Darstellungsbereichs für jede wichtige Kombination aus Browser und Betriebssystem untersucht.

Einer der getesteten Aspekte ist das Verhalten bei der Größenanpassung, wenn der OSK angezeigt wird. Das führte zu folgender Klassifizierung:

Gruppe 1

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

  • Safari auf iOS
  • Safari für iPadOS
  • Chrome unter ChromeOS
  • Google Chrome unter iOS
  • Chrome für iPadOS
  • Edge für iOS
  • Edge auf iPadOS

Gruppe 2

Browser, die die Größe des visuellen Darstellungsbereichs und des Layout-Darstellungsbereichs anpassen.

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

Gruppe 3

Browser, die die Größe des Darstellungsbereichs nicht ändern:

  • Standardmäßig keine: In Chrome unter Android können Sie dieses Verhalten mithilfe der VirtualKeyboard API aktivieren.

Nebenwirkungen jedes Verhaltens

Dieser Unterschied bei der Größenanpassung der verschiedenen Darstellungsbereiche bei der Darstellung der OSK führt zu einem nicht interoperablen Layout und Größenverhalten der Websites.

In den Browsern aus Gruppe 1 mit angezeigter OSK:

  • Die berechneten Werte für relative Einheiten des Darstellungsbereichs bleiben gleich.
  • Elemente, die so konzipiert sind, dass sie den gesamten sichtbaren Raum einnehmen, behalten ihre Größe.
  • Elemente, die position: fixed verwenden, bleiben an Ort und Stelle und können vom OSK verdeckt werden.

In den Browsern aus Gruppe 2 mit angezeigter OSK:

  • Die berechneten Werte für relative Einheiten des Darstellungsbereichs werden kleiner.
  • Elemente, die so konzipiert wurden, dass sie die gesamte visuelle Fläche einnehmen.
  • Elemente, die position: fixed verwenden, können an anderer Stelle im Layout enden.
Visualisierung der Nebenwirkungen in beiden Gruppen. Beachten Sie die unterschiedlichen Positionen der Elemente, für die die Funktion „Position“ verwendet wird: „Fixed“ (blaue Kästchen).
Visualisierung der Nebenwirkungen in beiden Gruppen. Notieren Sie sich die verschiedenen Positionen der Elemente, für die position: fixed (blaue Kästchen) verwendet wird. Zu sehen sind Safari unter iOS (links) und Chrome unter Android (in der Mitte und rechts).

Sofern Sie nicht auf das User-Agent-Sniffing zurückgreifen oder sich auf ein umfangreiches Scripting verlassen, 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 bestimmt wird, über die der Nutzer auf Ihre Website gelangt.

Standardverhalten in Chrome 108 ändern

Ab Chrome 108 wird die Größe 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 ChromeOS, Safari unter iOS und iPadOS und Edge unter iOS, iPadOS und Windows angeglichen.

Durch diese Änderung können Autoren unabhängig davon, unter welchem Betriebssystem Chrome ausgeführt wird, welches Verhalten verwendet wird. Darüber hinaus ermöglicht es stabile Darstellungsbereich-relative Einheiten: Das Ein- oder Ausblenden der OSK wirkt sich nicht auf diese Einheiten aus.

Ein anderes Verhalten aktivieren

Wenn Sie möchten, dass bei Ihrer Website die Größenänderung von vor 108 verwendet wird, machen Sie sich keine Sorgen. In Chrome 108 gibt es außerdem eine Erweiterung des Meta-Tags des Darstellungsbereichs.

Über den Schlüssel interactive-widget können Sie Chrome mitteilen, welches Verhalten bei der Größenanpassung gewünscht ist.

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

  • resizes-visual: Nur die Größe des visuellen Darstellungsbereichs wird geändert, nicht aber die des Layout-Darstellungsbereichs.
  • resizes-content: Die Größe des visuellen Darstellungsbereichs und des Layout-Darstellungsbereichs ändern.
  • overlays-content: Die Größe eines Darstellungsbereichs wird nicht geändert.

Um das „alte“ Verhalten von Chrome unter Android wieder zu aktivieren, setzen Sie das Meta-Tag für den Darstellungsbereich auf dieses:

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

Wenn du interactive-widget nicht in das Meta-Tag für den Darstellungsbereich einfügst, verwendet Chrome das Standardverhalten, also resizes-visual.

Bei der Visualisierung wirken sich die Einstellungen auf die verschiedenen Darstellungsbereiche aus:

Visueller Vergleich aller drei Werte in Chrome 108 unter Android. Von links nach rechts: Größe des visuellen Elements, Größe des Inhalts und Overlays werden angepasst.
Visueller Vergleich aller drei Werte in Chrome 108 unter 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 sich bei bestehenden Websites geringfügige Unterschiede zu bestehenden Websites ergeben. Wir gehen jedoch davon aus, dass diese Websites nicht blockieren, da Chrome 108 unter Android nun ähnlich wie Safari unter iOS funktioniert. Daher funktionieren Websites, die in Safari unter iOS problemlos funktionieren, auch in Chrome 108 unter Android.

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

Feedback können Sie unter crbug.com senden. Achten Sie darauf, im Titel des Berichts das Wort „Bildschirmtastatur“ anzugeben.

Zusätzliche Ressourcen