Viewport

De viewport is het zichtbare gedeelte van een webpagina of applicatie op het scherm van de gebruiker op een bepaald moment. Op een desktopcomputer komt de viewport overeen met het browservenster minus werkbalken, scrollbalken en browser-chrome. Op tablets en smartphones is de viewport het volledige schermgebied dat de browser kan gebruiken. De viewport bepaalt hoe content wordt geschaald, opgemaakt en gepresenteerd aan de lezer. In HTML vertelt de `<meta name="viewport">`-tag de browser hoe de paginadimensies en schaling moeten worden beheerd, wat de basis vormt van [responsief ontwerp](/glossary/responsive-design).

Content die viewport-verschillen negeert, levert een slechte leeservaring op bepaalde apparaten. Tekst kan onleesbaar klein zijn op telefoons, knoppen kunnen onmogelijk te tikken zijn, of horizontaal scrollen kan nodig zijn om de hele pagina te zien. Aangezien mobiele apparaten nu het merendeel van het webverkeer uitmaken, verliezen publicaties die zich niet aanpassen aan verschillende viewportgroottes lezers en ogen onprofessioneel. Zoekmachines nemen mobielvriendelijkheid ook mee in hun rankings, dus correcte viewportafhandeling beïnvloedt zowel de gebruikerservaring als de vindbaarheid.

FlipLink-publicaties zijn volledig responsief en passen zich automatisch aan elke viewportgrootte aan. De [flipbook](/glossary/flipbook)-viewer detecteert de beschikbare viewportafmetingen en past de paginaweergave, plaatsing van bedieningselementen en zoomniveaus dienovereenkomstig aan. Op brede desktop-viewports worden publicaties weergegeven als [tweepagina-spread](/glossary/page-spread). Op smalle mobiele viewports schakelen ze over naar enkelpaginaweergave met aanraakvriendelijke navigatie. De instellingen voor [pagina-ervaring](/features/page-experience-and-layout) stellen uitgevers in staat om te kiezen tussen verschillende lay-outmodi, en FlipLink handelt de viewportberekeningen af om content altijd leesbaar en goed geproportioneerd te houden. Wanneer je een flipbook insluit met de [responsieve insluitcode](/features/sharing-and-distribution), vult deze automatisch zijn container en reageert op viewportwijzigingen — inclusief apparaatrotatie — zonder extra configuratie.

De viewport wordt beheerd door de HTML meta-tag `<meta name="viewport" content="width=device-width, initial-scale=1">`. Deze tag instrueert de browser om de paginabreedte gelijk te stellen aan de schermbreedte van het apparaat en te starten met 1x zoom. Zonder deze tag renderen mobiele browsers pagina's op een virtuele breedte van ongeveer 980 pixels en verkleinen vervolgens het resultaat, waardoor tekst piepklein en interacties moeilijk worden. Belangrijke viewport-eigenschappen zijn: - **width**: Stelt de viewportbreedte in. `device-width` komt overeen met de werkelijke schermbreedte in CSS-pixels. - **initial-scale**: Beheert het zoomniveau wanneer de pagina voor het eerst laadt. Een waarde van `1` betekent geen zoom. - **maximum-scale** en **user-scalable**: Bepalen of gebruikers kunnen pinch-to-zoomen. Toegankelijkheidsrichtlijnen bevelen aan om zoomen toe te staan. - **viewport-fit**: Op apparaten met inkepingen of afgeronde hoeken breidt `viewport-fit=cover` de content uit naar het veilige gebied. CSS media queries gebruiken viewportafmetingen om verschillende stijlen toe te passen. Bijvoorbeeld, `@media (max-width: 768px)` richt zich op viewports smaller dan 768 CSS-pixels, wat een veelgebruikt breekpunt is voor de overgang van tablet naar mobiel.

**"Viewport en schermresolutie zijn hetzelfde."** Dat zijn ze niet. Een telefoon kan een schermresolutie hebben van 1170 x 2532 fysieke pixels maar een viewport van 390 x 844 CSS-pixels. De device pixel ratio (DPR) overbrugt het verschil — op die telefoon is de DPR 3, wat betekent dat elke CSS-pixel overeenkomt met 9 fysieke pixels. Ontwerpers werken in CSS-pixels (de viewport), niet in fysieke resolutie. **"Het instellen van `user-scalable=no` verbetert de ervaring."** Het voorkomen van zoomen schaadt de toegankelijkheid voor gebruikers met visuele beperkingen. Moderne webstandaarden en veel toegankelijkheidsaudits markeren dit als een fout. FlipLink's viewer staat standaard pinch-to-zoom toe terwijl de lay-outintegriteit behouden blijft. **"Desktop viewportgroottes zijn consistent."** Desktop viewports variëren sterk. Een gebruiker met een 27-inch monitor en geopende browser-ontwikkelaarstools kan een viewport hebben van slechts 900 pixels — ruim binnen tabletgebied. Responsieve publicaties moeten zich aanpassen aan werkelijke viewportafmetingen, niet aan veronderstelde apparaatcategorieën.

De viewport is het venster waardoor lezers je content zien. Publicaties die reageren op viewportgrootte leveren een consistente, professionele ervaring op elk apparaat — van een 4-inch telefoon tot een 32-inch desktopmonitor — zonder dat de lezer ooit de aanpassing opmerkt.