Im November werden mit der Veröffentlichung von Chrome 108 einige Änderungen am Verhalten des Layout-Darstellungsbereichs vorgenommen, wenn die Bildschirmtastatur angezeigt wird. Mit dieser Änderung wird in Chrome für Android nicht mehr die Größe des Layout-Darstellungsbereichs, sondern nur noch die Größe des visuellen Darstellungsbereichs angepasst. Damit wird das Verhalten von Chrome unter Android an das von Chrome unter iOS und Safari unter iOS angepasst.
Im Folgenden finden Sie einige Hintergrundinformationen dazu, warum Chrome diese Änderung vornimmt und wie Sie sich darauf vorbereiten können.
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, über 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 an.
Wenn Sie Elemente mit position: fixed positionieren, werden sie in diesem Layout-Viewport angeordnet. Da der Layout-Darstellungsbereich beim Scrollen auf einer Seite an Ort und Stelle bleibt, gilt dies auch für Elemente, die position: fixed verwenden.
position: fixed (blaue Kästchen) angeordnet sind. Von links nach rechts: Safari auf dem iPhone, Chrome auf Android und Firefox auf Android.
Zusätzlich zu diesem Layout-Darstellungsbereich bietet der Browser auch einen visuellen Darstellungsbereich. Er gibt den Teil des Darstellungsbereichs an, der gerade sichtbar ist. Bei Zoomstufe 1 ist dieser visuelle Darstellungsbereich so groß wie der Layout-Darstellungsbereich.
Wenn Sie heranzoomen, verkleinern Sie die Größe des visuellen Darstellungsbereichs im Verhältnis zum Layout-Darstellungsbereich.
Verhalten bei Größenänderung des Darstellungsbereichs
Wenn ein Eingabefeld oder ein anderer bearbeitbarer Bereich fokussiert wird, können Geräte – meist Touchscreen-Geräte – eine Bildschirmtastatur einblenden. Diese Tastatur, die oft als Bildschirmtastatur bezeichnet wird, ermöglicht es Nutzern, Inhalte in den bearbeitbaren Bereich einzugeben.
Dabei reagieren Browser in Bezug auf die verschiedenen Darstellungsbereiche auf eine der folgenden Arten:
- Nur die Größe des visuellen Darstellungsbereichs anpassen und den Layout-Darstellungsbereich versetzen.
- Sowohl die Größe des visuellen Darstellungsbereichs als auch die des Layout-Darstellungsbereichs wird angepasst.
- Weder die Größe des Layout-Darstellungsbereichs noch die des visuellen Darstellungsbereichs wird geändert. Die Bildschirmtastatur wird über beide gelegt.
Diese drei Verhaltensweisen werden so dargestellt:
Je nachdem, welche Browser- und Betriebssystemkombination ein Besucher verwendet, wird eines der Verhaltensweisen verwendet, auf die Sie keinen Einfluss haben.
Zuordnung der verschiedenen Verhaltensweisen bei Größenänderungen
Im Rahmen der Viewport Investigation Effort von Interop 2022 wurden verschiedene Darstellungsbereich-bezogene Aspekte für alle gängigen Browser- und Betriebssystemkombinationen untersucht.
Einer der getesteten Aspekte ist das Verhalten bei der Größenanpassung, wenn die Bildschirmtastatur angezeigt wird. Dies führte zu folgender Klassifizierung:
Gruppe 1
Browser, die die Größe des visuellen Darstellungsbereichs anpassen, den Layout-Darstellungsbereich aber unverändert lassen.
- Safari unter iOS
- Safari unter iPadOS
- Chrome unter ChromeOS
- Chrome unter iOS
- Chrome unter iPadOS
- Edge für iOS
- Edge für iPadOS
Gruppe 2
Browser, die sowohl die Größe des visuellen Darstellungsbereichs als auch des Layout-Darstellungsbereichs anpassen.
- Chrome für Android
- Firefox für Android
- Edge für Android
- Firefox unter iOS
Gruppe 3
Browser, die die Größe keines Darstellungsbereichs anpassen:
- Standardmäßig keine – In Chrome unter Android können Sie dieses Verhalten über die VirtualKeyboard API aktivieren.
Nebenwirkungen der einzelnen Verhaltensweisen
Dieser Unterschied bei der Größenänderung der verschiedenen Darstellungsbereiche, wenn die Bildschirmtastatur angezeigt wird, führt zu einem nicht interoperablen Layout- und Größenverhalten von Websites.
In den Browsern aus Gruppe 1 mit angezeigter Bildschirmtastatur:
- Die berechneten Werte für Viewport-relative Einheiten bleiben gleich.
- Elemente, die den gesamten visuellen Bereich einnehmen sollen, behalten ihre Größe bei.
- Elemente, die
position: fixedverwenden, bleiben an Ort und Stelle und können von der Bildschirmtastatur verdeckt werden.
In den Browsern aus Gruppe 2, in denen die Bildschirmtastatur angezeigt wird:
- Die berechneten Werte für Viewport-relative Einheiten werden kleiner.
- Elemente, die den gesamten visuellen Bereich einnehmen sollten, werden verkleinert.
- Elemente, die
position: fixedverwenden, können an einer anderen Stelle im Layout landen.
position: fixed verwenden (blaue Kästchen). Abgebildet sind Safari unter iOS (links) und Chrome unter Android (Mitte und rechts).
Wenn Sie nicht auf User-Agent-Sniffing zurückgreifen oder umfangreiches Scripting verwenden, können Sie nicht wissen, welches Verhalten verwendet wird. Sie können das Verhalten auch nicht ändern, da es durch die Kombination aus Browser und Betriebssystem bestimmt wird, die der Nutzer verwendet.
Änderung des Standardverhaltens in Chrome 108
Ab Chrome 108 wird in Chrome für Android das Verhalten bei der Größenanpassung des Darstellungsbereichs so angepasst, dass die Größe des Layout-Darstellungsbereichs nicht mehr geändert wird, wenn die Bildschirmtastatur angezeigt wird.
Dadurch wird das Verhalten von Chrome unter Android an das von Chrome unter iOS, iPadOS, Windows und CrOS, Safari unter iOS und iPadOS sowie Edge unter iOS, iPadOS und Windows angepasst.
Dank dieser Änderung wissen Autoren, welches Verhalten verwendet wird, unabhängig davon, auf welchem Betriebssystem Chrome ausgeführt wird. Außerdem ermöglicht sie stabile viewport-relative Einheiten: Das Ein- oder Ausblenden der Bildschirmtastatur hat keine Auswirkungen auf diese Einheiten.
Anderes Verhalten aktivieren
Wenn Sie möchten, dass Ihre Website das Verhalten zur Größenanpassung vor Version 108 verwendet, ist das kein Problem. In Chrome 108 wird außerdem eine Erweiterung des Darstellungsbereich-Meta-Tags eingeführt.
Über den Schlüssel interactive-widget können Sie Chrome mitteilen, welches Verhalten bei der Größenänderung Sie wünschen.
Zulässige Werte für interactive-widget sind:
resizes-visual: Nur die Größe des visuellen Darstellungsbereichs wird angepasst, nicht die des Layout-Darstellungsbereichs.resizes-content: Sowohl die Größe des visuellen Darstellungsbereichs als auch die des Layout-Darstellungsbereichs wird angepasst.overlays-content: Die Größe des Darstellungsbereichs wird nicht angepasst.
Wenn Sie das „alte“ Verhalten von Chrome unter Android wieder aktivieren möchten, legen Sie das Darstellungsbereich-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 Darstellungsbereich-Meta-Tag einfügen, verwendet Chrome das Standardverhalten, also resizes-visual.
Visuell dargestellt haben die Einstellungen die folgenden Auswirkungen auf die verschiedenen Darstellungsbereiche:
resizes-visual, resizes-content und overlays-content.
Auf dieser Demowebsite kannst du die Auswirkungen der einzelnen Werte in deinem Browser ausprobieren.
Tests und Feedback
Wir erwarten einige geringfügige Unterschiede zu bestehenden Websites, gehen aber davon aus, dass diese nicht blockierend sind, da sich Chrome 108 unter Android jetzt ähnlich wie Safari unter iOS verhält. Websites, die in Safari unter iOS gut funktionieren, sollten daher auch in Chrome 108 unter Android gut funktionieren.
Wir empfehlen Website-Autoren jedoch, ihre Websites aktiv in Chrome 108 zu testen, das ab dem 27. Oktober 2022 als Betaversion verfügbar ist. Achten Sie insbesondere auf Elemente, die position: fixed verwenden und/oder auf Viewport-relativen Einheiten basieren.
Feedback kann unter crbug.com gemeldet werden. Achten Sie darauf, „on-screen keyboard“ (Bildschirmtastatur) im Titel des Berichts anzugeben.