De viewport configureren

Deze regel wordt geactiveerd wanneer PageSpeed Insights detecteert dat uw pagina geen viewport specificeert of een viewport specificeert die niet wordt aangepast aan verschillende apparaten.

Overzicht

Met een viewport wordt bepaald hoe een webpagina wordt weergegeven op een mobiel apparaat. Zonder viewport geven mobiele apparaten de pagina weer met een gebruikelijke breedte voor desktopschermen, geschaald zodat deze op het scherm past. Als u een viewport instelt, kunt u zelf de breedte en schaal van de pagina op verschillende apparaten bepalen.

Links: een pagina zonder metaviewport.
Rechts: een pagina met een viewport die overeenkomt met de breedte van het apparaat.

Aanbevelingen

Pagina's die zijn geoptimaliseerd voor een goede weergave op mobiele apparaten, moeten een metaviewport in het head-gedeelte van het document bevatten die width=device-width, initial-scale=1 specificeert.

<meta name=viewport content="width=device-width, initial-scale=1">

Aanvullende informatie

Termen:

  • Hardwarepixel: een fysieke pixel op het scherm. Een iPhone 5 heeft bijvoorbeeld een scherm met 640 horizontale hardwarepixels.
  • Apparaatonafhankelijke pixel (DIP; Device-Independent Pixel): een schaal voor apparaatpixels die overeenkomt met een uniforme referentiepixel op een normale kijkafstand. Deze moet op alle apparaten ongeveer even groot zijn. Een iPhone 5 is 320 DIP's breed.
  • CSS-pixel: de eenheid die wordt gebruikt voor de pagina-indeling die wordt geregeld door de viewport. Pixelafmetingen in stijlen zoals width: 100px worden gespecificeerd in CSS-pixels. De verhouding van CSS-pixels tot apparaatonafhankelijke pixels is de schaalfactor (of zoomfactor) van de pagina.

Desktoppagina's op mobiele apparaten

Als een pagina geen viewport specificeert, geven mobiele browsers die pagina weer op een reservebreedte, variërend van 800 tot 1024 CSS-pixels. De schaalfactor van de pagina wordt aangepast zodat de pagina op het scherm past, wat betekent dat gebruikers moeten inzoomen voordat ze iets kunnen doen met de pagina.

Metaviewporttag

Een metaviewporttag geeft de browser instructies voor het regelen van de afmetingen en schaal van de pagina en moet worden opgenomen in het head-gedeelte van het document.

Viewport met vaste breedte

De viewport kan worden ingesteld op een specifieke breedte, zoals width=320 of width=1024. Hoewel dit wordt afgeraden, kan dit een nuttige noodoplossing zijn om ervoor te zorgen dat pagina's met vaste afmetingen zoals verwacht worden weergegeven.

Responsieve viewport

Met de metaviewportwaarde width=device-width krijgt de pagina opdracht de breedte van het scherm af te stemmen op de apparaatonafhankelijke pixels. Zo kan de pagina de inhoud opnieuw indelen op basis van verschillende schermformaten.

In bepaalde browsers, zoals iOS en Windows Phone, wordt de breedte van de pagina constant gehouden wanneer er naar de liggende modus wordt gedraaid. De inhoud wordt ingezoomd in plaats van opnieuw ingedeeld om het scherm te vullen. Als u het kenmerk initial-scale=1 toevoegt, laat u browsers weten dat er een 1:1-relatie moet bestaan tussen CSS-pixels en apparaatonafhankelijke pixels, ongeacht de stand van het apparaat, waardoor de pagina optimaal kan profiteren van de volledige breedte in de liggende modus.

vs
Links: een iPhone 5 die wordt gedraaid met width=device-width, wat resulteert in een liggende breedte van 320px.
Rechts: een iPhone 5 die wordt gedraaid met width=device-width, initial-scale=1, wat resulteert in een liggende breedte van 568px.

Als u een responsieve viewport wilt gebruiken, moet u pagina's zodanig ontwerpen dat ze werken met verschillende breedten. Bekijk onze aanbevelingen voor het aanpassen van het inhoudsformaat aan de viewport voor advies.

Andere overwegingen

Vermijd minimum-scale, maximum-scale, user-scalable

U kunt de minimum- en maximumzoom instellen of de zoommogelijkheid voor de viewport helemaal uitschakelen voor gebruikers. Deze opties hebben een negatieve impact op de toegankelijkheid en kunnen doorgaans het beste worden vermeden.

@viewport

Hoewel de metaviewporttag breed wordt ondersteund, maakt deze geen deel uit van een formele norm. Dit gedrag wordt opgenomen in CSS als onderdeel van de specificatie CSS Device Adaptation. Totdat deze specificatie is afgerond en op grote schaal is toegepast, moeten auteurs voor compatibiliteit de metaviewporttag blijven gebruiken, alleen of met bijbehorende @viewport-stijlen.

Hulpbronnen: