Formaat van inhoud aanpassen aan viewport

Deze regel wordt geactiveerd wanneer PageSpeed Insights detecteert dat de pagina-inhoud niet horizontaal in het gespecificeerde viewport-formaat past, waardoor de gebruiker gedwongen wordt horizontaal te schuiven om alle inhoud te bekijken.

Overzicht

Op desktopcomputers en mobiele apparaten zijn gebruikers eraan gewend websites verticaal maar niet horizontaal te scrollen. Als de gebruiker wordt gedwongen horizontaal te scrollen of uit te zoomen om de hele pagina te bekijken, leidt dit tot een slechte gebruikerservaring.

Wanneer u een mobiele site met een metaviewporttag ontwikkelt, kunt u gemakkelijk per ongeluk pagina-inhoud maken die niet precies in de gespecificeerde viewport past. Een afbeelding die bijvoorbeeld wordt weergegeven met grotere breedte dan de viewport, kan tot gevolg hebben dat de viewport horizontaal wordt gescrold. U moet deze inhoud aanpassen aan de breedte van de viewport, zodat de gebruiker niet horizontaal hoeft te scrollen.

Aanbevelingen

Aangezien schermafmetingen sterk variëren tussen apparaten (zoals tussen telefoons en tablets, en zelfs tussen verschillende telefoons), moet u de viewport configureren zodat uw pagina's correct worden weergegeven op veel verschillende apparaten. Aangezien de breedte (in CSS-pixels) van de viewport echter kan variëren, moet uw pagina-inhoud niet afhankelijk zijn van een bepaalde viewportbreedte voor een correcte weergave.

  • Vermijd het instellen van grote absolute CSS-breedten voor pagina-elementen (zoals div{width:360px;}), omdat daardoor het element te breed kan worden voor de viewport op een smaller apparaat (bijvoorbeeld een apparaat met een breedte van 320 CSS-pixels, zoals een iPhone). In plaats daarvan moet u overwegen relatieve breedtewaarden te gebruiken, zoals width:100%. Pas ook op voor het gebruik van grote absolute positioneringswaarden die ervoor kunnen zorgen dat het element op kleine schermen buiten de viewport valt.
  • Zo nodig kunnen CSS-mediaquery's worden gebruikt om verschillende stijlen toe te passen voor kleine en grote schermen. Dit HTML5 Rocks-artikel bevat meer aanbevelingen voor hoe u dit kunt doen.
  • Voor afbeeldingen bevat dit artikel een goed overzicht van hoe u afbeeldingen met een responsieve grootte kunt weergeven zonder dat de pagina onnodig vaak opnieuw moet worden ingedeeld tijdens de weergave.