Skip to main content

Viewport

Wat betekent Viewport?

De term Viewport verwijst naar de grootte van het beschikbare scherm van een eindtoestel. Dit kunnen bijvoorbeeld smartphones, tablets, laptop- of desktop-pc’s zijn. Viewport heeft echter een meer specifieke betekenis als metatag in HTML5, waar hij voornamelijk wordt gebruikt in de context van mobiele optimalisatie. Het zorgt ervoor dat de grootte van het beschikbare scherm optimaal wordt benut en dat inhoud volledig en in de juiste grootte wordt weergegeven.

Hoe werkt Viewport?

Er zijn twee manieren om de Viewport in een HTML-bestand expliciet te specificeren, namelijk:

1. rechtstreeks in het HTML-document: de volgende code wordt ingevoegd in het hoofdgedeelte van het HTML-document:

[meta name=”view port” content=”width=device-width, initial-scale=1″]

Met deze instructie wordt de hele webpagina aangepast aan de breedte van het beschikbare beeldscherm van het eindapparaat.

2. extern in een bestand CSS waarnaar wordt verwezen: De volgende CSS code wordt direct ingevoegd aan het begin van het bestand CSS waarnaar wordt verwezen:

@viewport {
breedte: apparaatbreedte;
}

Deze regel code specificeert de breedte van het HTML-bestand zodat het zich automatisch aanpast aan de beeldschermbreedte van het eindapparaat.

Betekenis voor mobiele marketing

De specificatie van de Viewports is essentieel voor alle moderne websites. App le en Google bevelen het gebruik van het meta-element aan voor alle webpagina’s die responsive moeten zijn. Wie zijn bezoekers een optimale gebruikerservaring wil bieden, gebruikt het element om de presentatie van de website te optimaliseren voor verschillende eindapparaten en schermformaten.

Verdere informatie over dit onderwerp is hier te vinden:

https://www.quirksmode.org/mobile/viewports
https://www.quirksmode.org/mobile/viewports2
https://developer.apple.com/library/archive/documentation/UsingtheViewport

https://developers.google.com/web/fundamentals/viewport
http://webkrauts.de/ein-blick-durch-den-viewport


Heeft u nog vragen?

Neem contact met ons op


Verdere inhoud