In november, met de release van Chrome 108, zal Chrome enkele wijzigingen aanbrengen in de manier waarop de Layout Viewport zich gedraagt wanneer het schermtoetsenbord (OSK) wordt weergegeven. Met deze wijziging zal Chrome op Android niet langer het formaat van de Layout Viewport wijzigen, maar in plaats daarvan alleen het formaat van de Visual Viewport. Hierdoor wordt het gedrag van Chrome op Android vergelijkbaar met dat van Chrome op iOS en Safari op iOS.
Hier vindt u wat achtergrondinformatie over wat er gebeurt, waarom Chrome deze wijziging doorvoert en wat u kunt doen om u voor te bereiden.
De lay-outviewport en de visuele viewport
Wanneer u een website bezoekt, krijgt u niet de volledige inhoud van de pagina te zien nadat deze is geladen. In plaats daarvan biedt de browser u een viewport waarmee u een deel van de pagina te zien krijgt. Deze viewport wordt ook wel de Layout Viewport genoemd. Wanneer de inhoud van een pagina te groot wordt, biedt de browser een scrollmechanisme.
Wanneer u elementen positioneert met position: fixed , worden deze uitgezet tegen die Layout Viewport. Terwijl de Layout Viewport op zijn plaats blijft terwijl u naar beneden scrollt op een pagina, zullen ook elementen die position: fixed gebruiken dit ook doen.
position: fixed (blauwe vakjes) . Getoond worden (van links naar rechts) Safari op iPhone, Chrome op Android en Firefox op Android.Naast deze Layout Viewport biedt de browser ook een Visual Viewport . Het vertegenwoordigt het gedeelte van de viewport dat momenteel zichtbaar is. Op zoomniveau 1 is deze visuele viewport even groot als de layoutviewport.
Wanneer u inzoomt met een knijpbeweging, verkleint u de grootte van de visuele viewport in verhouding tot de layoutviewport.
Gedrag bij het wijzigen van de grootte van de viewport
Bij het focussen op een invoer of een ander bewerkbaar gebied kunnen apparaten (meestal apparaten met touchscreen) een toetsenbord op het scherm weergeven. Met dit toetsenbord, vaak een virtueel toetsenbord genoemd, kunnen gebruikers inhoud invoeren in het bewerkbare gebied.
Wanneer ze dit doen, reageren browsers op een van de volgende manieren met betrekking tot de verschillende viewports:
- Pas het formaat van alleen de visuele viewport aan en verschuif de lay-outviewport.
- Wijzig het formaat van zowel de visuele viewport als de lay-outviewport.
- Wijzig het formaat van de Layout Viewport of Visual Viewport niet, waarbij het virtuele toetsenbord over beide heen wordt gelegd.
Deze drie gedragingen worden als volgt gevisualiseerd:
Afhankelijk van welke browser- en besturingssysteemcombinatie een bezoeker gebruikt, wordt een van de gedragingen gebruikt waar u geen controle over heeft.
Het in kaart brengen van de verschillende gedragingen bij het wijzigen van de grootte
In de Viewport Investigation Effort -onderdeel van Interop 2022 - zijn verschillende viewport-gerelateerde aspecten onderzocht, voor elke belangrijke browser- en besturingssysteemcombinatie.
Een van de geteste aspecten is het formaatwijzigingsgedrag wanneer de OSK wordt weergegeven. Dit leidde tot de volgende indeling:
Groep één
Browsers die het formaat van de visuele viewport aanpassen, waardoor de layout-viewport ongemoeid blijft.
- Safari op iOS
- Safari op iPadOS
- Chrome op Chrome OS
- Chrome op iOS
- Chrome op iPadOS
- Rand op iOS
- Edge op iPadOS
Groep twee
Browsers die het formaat van zowel de visuele viewport als de layoutviewport wijzigen.
- Chroom op Android
- Firefox op Android
- Rand op Android
- Firefox op iOS
Groep drie
Browsers die het formaat van geen van de vensters wijzigen:
- Standaard geen – In Chrome op Android kunt u zich voor dit gedrag aanmelden via de VirtualKeyboard API
Bijwerkingen van elk gedrag
Dit verschil in de manier waarop de verschillende viewports worden vergroot of verkleind wanneer de OSK wordt weergegeven, leidt tot een niet-interoperabele lay-out en formaatgedrag van websites.
In de browsers uit groep 1 , met de OSK getoond:
- De berekende waarden voor viewport-relatieve eenheden blijven hetzelfde.
- Elementen die zijn ontworpen om de volledige visuele ruimte in beslag te nemen, behouden hun formaat.
- Elementen die gebruik maken van
position: fixedblijven op hun plaats en kunnen door de OSK worden verborgen.
In de browsers uit groep 2 , met de OSK getoond:
- De berekende waarden voor viewport-relatieve eenheden worden kleiner.
- Elementen die zijn ontworpen om de volledige visuele ruimte in beslag te nemen, krimpen.
- Elementen die gebruik maken
position: fixedkunnen elders in de layout terechtkomen.
position: fixed (blauwe vakjes) . Getoond worden Safari op iOS (links) en Chrome op Android (midden en rechts).Tenzij u gebruikmaakt van User-Agent-snuffelen of vertrouwt op uitgebreide scripting, kunt u niet weten welk gedrag wordt gebruikt. U kunt het gedrag ook niet wijzigen, aangezien dit wordt bepaald door de combinatie van browser en besturingssysteem waarmee de gebruiker een bezoek brengt.
Het standaardgedrag in Chrome 108 wijzigen
Vanaf Chrome 108 past Chrome op Android het formaat van de viewport aan, zodat het formaat van de Layout Viewport niet langer wordt gewijzigd wanneer het schermtoetsenbord wordt weergegeven.
Hierdoor wordt het gedrag van Chrome op Android afgestemd op dat van Chrome op iOS, iPadOS, Windows en CrOS, Safari op iOS en iPadOS, en Edge op iOS, iPadOS en Windows.
Dankzij deze wijziging kunnen auteurs weten welk gedrag zal worden gebruikt, ongeacht op welk besturingssysteem Chrome draait. Bovendien maakt het stabiele viewport-relatieve eenheden mogelijk: het tonen of verbergen van de OSK heeft geen invloed op deze eenheden.
Kiezen voor ander gedrag
Als u wilt dat uw website het formaatwijzigingsgedrag van vóór 108 gebruikt, hoeft u zich geen zorgen te maken. Ook verzending in Chrome 108 is een uitbreiding op de viewport-metatag .
Via de interactive-widget kunt u Chrome vertellen welk formaatwijzigingsgedrag u wilt.
Geaccepteerde waarden voor interactive-widget zijn:
-
resizes-visual: Pas het formaat van alleen de visuele viewport aan, maar niet de lay-outviewport. -
resizes-content: Pas het formaat van zowel de visuele viewport als de lay-outviewport aan. -
overlays-content: wijzig het formaat van geen enkele viewport.
Als u zich weer wilt aanmelden voor het ‘oude’ Chrome-op-Android-gedrag, stelt u de viewport-metatag hierop in:
<meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=resizes-content">
Als u geen interactive-widget in de viewport-metatag opneemt, gebruikt Chrome het standaardgedrag, namelijk resizes-visual .
Gevisualiseerd hebben de instellingen dit effect op de verschillende viewports:
resizes-visual , resizes-content en overlays-content .Op deze demowebsite kunt u het effect van elke waarde in uw browser uitproberen.
Testen en feedback
We verwachten enkele kleine verschillen met bestaande sites, maar verwachten dat deze niet-blokkerend zullen zijn, aangezien Chrome 108 op Android zich nu op dezelfde manier zal gedragen als Safari op iOS. Daarom zouden websites die prima werken op Safari op iOS ook prima moeten werken op Chrome 108 op Android.
We moedigen website-auteurs echter aan om hun websites actief te testen in Chrome 108, dat vanaf 27 oktober 2022 in bèta is. Let vooral op elementen die gebruik maken van position: fixed en/of vertrouwen op Viewport-relatieve eenheden .
Feedback kan worden gerapporteerd op crbug.com . Zorg ervoor dat u 'schermtoetsenbord' in de titel van het rapport opneemt.