Gebruiksopmerkingen
Een <meta name="viewport">-element heeft de volgende aanvullende attributen:
content | Het content-attribuut moet worden gedefinieerd, en de waarde ervan stelt verschillende viewport-gerelateerde gedragingen in.
De waarde is een door komma's gescheiden lijst van een of meer sleutel-waardeparen, opgegeven als key=value. De volgende sleutels zijn gedefinieerd:
|
|---|
Viewportbreedte en schermbreedte
De viewport van de browser is het gebied van het venster waarin webinhoud te zien is. De viewportgrootte moet worden berekend voordat de inhoud van de pagina kan worden opgemaakt — de pagina kan de viewport overlopen, in welk geval de browser scrollbalken biedt waarmee de gebruiker kan scrollen en toegang krijgt tot alle inhoud, maar de viewportgrootte is de leidraad voor hoeveel ruimte, vooral horizontaal, de inhoud moet passen.
Sommige mobiele apparaten en andere smalle schermen geven pagina's weer in een virtueel venster of viewport die breder is dan het scherm, en verkleinen vervolgens het weergegeven resultaat om binnen de schermgrootte te passen. Gebruikers kunnen dan inzoomen en pannen om nauwkeuriger naar verschillende delen van de pagina te kijken. Als een mobiel scherm bijvoorbeeld een breedte van 640px heeft, kunnen pagina's worden weergegeven met een virtuele viewport van 980px, en vervolgens wordt dit verkleind om binnen de ruimte van 640px te passen. Dit gebeurt omdat niet alle pagina's geoptimaliseerd zijn voor mobiel en er slecht uitzien (of in elk geval niet goed werken) wanneer ze worden weergegeven op een kleine viewportbreedte. Deze virtuele viewport is een manier om niet-mobiel-geoptimaliseerde sites er over het algemeen beter uit te laten zien op apparaten met smalle schermen. Dit mechanisme is echter niet zo goed voor pagina's die geoptimaliseerd zijn voor smalle schermen met behulp van media queries — als de virtuele viewport bijvoorbeeld 980px is, worden media queries die actief worden bij 640px of 480px of minder nooit gebruikt, waardoor de effectiviteit van dergelijke responsive-designtechnieken wordt beperkt. Het <meta>-element voor de viewport verzacht dit probleem van de virtuele viewport op apparaten met smalle schermen.
De meest voorkomende instelling is de volgende, die de viewport instelt op de breedte van het apparaat en inhoud weergeeft op 100% zoom:
<meta name="viewport" content="width=device-width, initial-scale=1" />Sites kunnen hun viewport instellen op een specifieke grootte. De definitie "width=320, initial-scale=1" kan bijvoorbeeld worden gebruikt om precies op een klein telefoondisplay in staande stand te passen. Dit kan problemen veroorzaken wanneer de browser een pagina op grotere schaal weergeeft. Om dit op te lossen, breiden browsers de viewportbreedte indien nodig uit om het scherm te vullen bij de gevraagde schaal. Dit is vooral nuttig op apparaten met een groot scherm.
Voor pagina's die een initiële of maximale schaal instellen, betekent dit dat de eigenschap width in feite wordt vertaald naar een minimale viewportbreedte. Als uw layout bijvoorbeeld minstens 500 pixels breedte nodig heeft, kunt u de volgende opmaak gebruiken. Wanneer het scherm breder is dan 500 pixels, zal de browser de viewport uitbreiden (in plaats van inzoomen) om binnen het scherm te passen:
<meta name="viewport" content="width=500, initial-scale=1" />Schermdichtheid
Schermresoluties zijn zo hoog geworden dat afzonderlijke pixels niet meer met het blote oog te onderscheiden zijn. Smartphones hebben bijvoorbeeld vaak kleine schermen met resoluties van meer dan 1920–1080 pixels (≈400dpi). Hierdoor kunnen veel browsers hun pagina's op een kleiner fysiek formaat weergeven door meerdere hardwarepixels om te zetten naar elke CSS-"pixel". Aanvankelijk veroorzaakte dit bruikbaarheids- en leesbaarheidsproblemen op veel voor aanraking geoptimaliseerde websites.
Op schermen met een hoge dpi worden pagina's met initial-scale=1 in feite door browsers uitvergroot. Hun tekst zal er glad en scherp uitzien, maar hun bitmapafbeeldingen maken mogelijk geen gebruik van de volledige schermresolutie. Om scherpere afbeeldingen op deze schermen te krijgen, willen webontwikkelaars mogelijk afbeeldingen — of hele layouts — ontwerpen op een hogere schaal dan hun uiteindelijke grootte en ze vervolgens verkleinen met CSS- of viewporteigenschappen.
De standaard pixelverhouding hangt af van de schermdichtheid. Op een display met een dichtheid van minder dan 200dpi is de verhouding 1.0. Op displays met een dichtheid tussen 200 en 300dpi is de verhouding 1.5. Voor displays met een dichtheid van meer dan 300dpi is de verhouding het geheel afgerond naar beneden (dichtheid/150dpi). Merk op dat de standaardverhouding alleen waar is wanneer de viewportschaal gelijk is aan 1. Anders hangt de relatie tussen CSS-pixels en apparaatpixels af van het huidige zoomniveau.
Voorbeelden
Een meta-viewportgrootte gebruiken
Het volgende voorbeeld geeft de browser aan dat de pagina moet worden weergegeven op de apparaatbreedte:
<meta name="viewport" content="width=device-width" />Een media query gebruiken met een viewport-meta
De volgende content-waarde gebruikt meerdere trefwoorden die de browser erop wijzen de volledige-schermmodus te gebruiken, samen met viewport-fit, dat helpt om weergave-uitsparingen zoals inkepingen (notches) van mobiele apparaten te vermijden:
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, viewport-fit=cover" />Het effect van interactieve UI-widgets
Interactieve UI-widgets van de browser kunnen de grootte van de viewports van de pagina beïnvloeden. De meest voorkomende dergelijke UI-widget is een virtueel toetsenbord. Om te bepalen welk aanpassingsgedrag de browser moet gebruiken, stelt u de eigenschap interactive-widget in.
Standaard past het virtuele toetsenbord alleen de visuele viewport aan in grootte, wat geen invloed heeft op de layout van de pagina. U kunt de layout van de pagina laten aanpassen aan de aanwezigheid van het virtuele toetsenbord door de eigenschap interactive-widget in te stellen op resizes-content:
<meta name="viewport" content="interactive-widget=resizes-content" />