met viewport

Viewport

De viewport is wat zichtbaar is van een webpagina op het beeldscherm van de bezoeker. De grootte van de viewport hangt van het apparaat af, op een computerscherm is het groter dan op een mobiele telefoon.

Voordat er mobiele apparaten waren werden webpagina’s alleen ontworpen voor computerschermen, en was het gebruikelijk om webpagina’s  te maken met een vaste breedte en een “static design”.

Toen men het World Wide Web ging verkennen met smartphones en tablets pasten de webpagina’s met een vaste breedte niet meer in de viewport van deze apparaten. De browsers losten dit op door de webpagina te verkleinen zodat het op het scherm paste, dit was verre van ideaal, maar wel een eerste oplossing voor dit probleem.



Meta name viewport

Met de komst van Html5 is er een meta-tag geïntroduceerd waarmee webdesigners controle kregen over dit probleem. Gebruik onderstaande <meta> tag in al je webpagina’s:

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″/>

Dit element geeft de browser instructies hoe om te gaan met verschillende pagina afmetingen en deze op de juiste manier te schalen.

Het gedeelte van de meta tag met width=device-width vertelt de browser om de breedte van de webpagina aan te passen aan de breedte van het apparaat, zodat de inhoud van de webpagina past op het scherm van het device.

De initial-scale=1.0 van de meta tag zegt iets over de grootte van het zoomlevel, als de pagina voor de eerste keer wordt geladen in de browser.

Voorbeelden viewport meta tag

Bekijk de onderstaande voorbeelden met een smartphone of tablet en zie het verschil met en zonder deze meta tag.

met viewport zonder viewport
Voorbeeld met meta tag Voorbeeld zonder meta tag



0 antwoorden

Plaats een Reactie

Meepraten?
Draag gerust bij!

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *