Wat is het verschil tussen een breakpoint en een viewport?
De viewport is het zichtbare gebied in de browser van je bezoeker. Je breakpoint is de grens die jij daarin legt.
Het een is een meting, het ander een keuze. Die twee worden vaak door elkaar gebruikt, en dat leidt tot verwarrende gesprekken.
De viewport
Dat is wat er op dit moment in beeld past, in de browser van deze bezoeker. Hij verandert als iemand zijn venster versleept of zijn telefoon draait.
Op een telefoon is hij bovendien kleiner dan het scherm, omdat de adresbalk ruimte inneemt. Meer daarover lees je bij viewport.
De breakpoint
Dat is een breedte die jij als ontwerper kiest. Boven die breedte gelden andere opmaakregels dan eronder.
De browser meet de viewport, vergelijkt hem met jouw breakpoints en kiest de bijbehorende regels.
Waarom het verschil telt
Omdat je viewports niet kunt bepalen en breakpoints wel. Je bezoekers hebben duizenden verschillende venstergroottes; jij legt daar een handvol grenzen in.
Praat dus over breedtes waarop iets omklapt, niet over apparaten of over dé viewport.
Mijn vuistregels
- Viewport is wat je meet, breakpoint is wat je kiest.
- Test met je venster slepen, niet alleen met vaste apparaatstanden.
- Reken op mobiel met de kleinere viewport door de adresbalk.
- Noem in overleg altijd de breedte in pixels, niet de apparaatnaam.
Die laatste voorkomt de meeste misverstanden tussen ontwerper en bouwer.
Er is nog een derde term
De viewport-metatag. Dat is een regel in je code die de browser vertelt dat je pagina zich moet aanpassen aan het schermformaat.
Ontbreekt die regel, dan toont een telefoon je site als een uitgezoomde desktopversie. Dat is een klassieke oorzaak van een site die op mobiel niet werkt.
In de praktijk
Bij WordPress staat die regel standaard in vrijwel elk thema. Kom je hem toch tegen als ontbrekend, dan is dat een kwestie van één regel toevoegen.
Meer over hoe dat samenhangt lees je bij responsive design.