Skip to main content

Viewport

Wat betekent Viewport?

De term viewport beschrijft de grootte van het beschikbare scherm van een mobiel apparaat. Dit kunnen bijvoorbeeld smartphones, tablets, laptops of desktop-pc’s zijn. Viewport heeft echter een meer specifieke betekenis als metatag in HTML5, waar het vooral wordt gebruikt in de context van mobiele optimalisatie. Het zorgt ervoor dat de grootte van het beschikbare scherm optimaal wordt gebruikt en dat de inhoud volledig en in de juiste grootte wordt weergegeven.

Hoe werkt het kijkvenster?

Er zijn twee manieren om het viewport expliciet te specificeren in een HTML-bestand, namelijk

1. direct 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″].

Deze instructie past de hele webpagina aan de breedte van de beschikbare weergave van het eindapparaat aan.

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

@viewport {
breedte: apparaatbreedte;
}

Deze coderegel specificeert de breedte van het HTML-bestand, zodat het zich automatisch aanpast aan de weergavebreedte van het eindapparaat.

Betekenis voor mobiele marketing

De viewportspecificatie is essentieel voor alle moderne websites. Apple en Google raden het gebruik van het meta-element aan voor alle aanwezigheden op het web die moeten reageren. Degenen die hun bezoekers een optimale gebruikerservaring willen bieden, gebruiken het element om de presentatie van de web presence te optimaliseren voor verschillende eindapparaten en beeldschermen.

Meer informatie over dit onderwerp vindt u hier:

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