Wat is de viewport?
De viewport is het zichtbare deel van een webpagina in je browser. Alles wat je ziet zonder te scrollen, valt eronder.
Op een telefoon is dat een smal, hoog vlak; op een bureaublad een breed vlak.
Je pagina zelf is meestal veel groter.
Waarom het een eigen woord heeft
Omdat het niet gelijk is aan je schermgrootte. Je browservenster, de adresbalk en de zoombalk halen er allemaal iets af.
Meer daarover lees je bij responsive design.
Waar je het tegenkomt
In je opmaak, bij de grenzen waarop je indeling verandert, en in maten die zich verhouden tot de schermgrootte.
Meer daarover lees je bij wat vh en vw zijn.
Wat het betekent voor je ontwerp
Wat er binnen de viewport past, ziet iedereen. Alles daaronder alleen wie scrollt.
Meer daarover lees je bij wat boven de vouw betekent.
Mijn vuistregels
- Reken op zeshonderd pixels hoogte op een telefoon.
- Zet je belangrijkste boodschap daarbinnen.
- Gebruik de juiste metatag.
- Test op een echt toestel.
Die derde is één regel code en zonder die regel oogt je site uitgezoomd op mobiel.
Het verschil met je scherm
Je scherm is de hardware; de viewport is wat de browser ervan overhoudt voor je pagina.
Meer daarover lees je bij mobile first.
Hoe hij verandert
Bij draaien, inzoomen en bij het verschijnen van het toetsenbord. Reken er dus niet op als vaste maat.
Meer daarover lees je bij css.