Een van de sleutelbegrippen in elk responsief ontwerp is de verandering van de viewport-grootte. Dat komt omdat mobiele viewports sterk verschillen van desktopviews. Om de viewport-grootte te bepalen, gebruiken we traditioneel de metatag voor de viewport.
De viewport-metatag, zoals alle slechtste browserontwikkelingen van de laatste eeuwigheid, is echter niet geldig voor W3C. Het werd oorspronkelijk geïntroduceerd door Apple in Safari en is sindsdien door andere browsers overgenomen. Dit resulteert in een inconsistente implementatie.
Gelukkig hebben de W3C opnieuw onze redding gebracht door de @viewport CSS-regel te introduceren.
Gebruik makend van de oude benadering met de metatag, dit is hoe we de browser zouden vertellen hoe groot de viewport zou moeten zijn:
Los van ongeldig te zijn, is de viewport-instructie geen data, het is presentatie. Dus, vasthouden aan onze data en presentatie scheiding principes, moet de viewport-instructie worden in CSS, niet HTML.
De W3C-oplossing in CSS ziet er als volgt uit:
@viewport {width: device-width;}Of als alternatief kunt u de viewport instellen met een nummer, zoals:
@viewport {width: 640px;}U kunt de @viewport-regel gebruiken in combinatie met @media-query's om een kijkvenster groter dan 960 te forceren tot 960 px, bijvoorbeeld:
@media screen and (min-width: 960px){@viewport {width: 960px;}}Met de @viewport-regel kunnen we ook standaard inzoomen op een pagina en zelfs de maximale zoomfunctie instellen:
@viewport {width: 960px;zoom: 1;max-zoom: 3;}Het is mogelijk om het zoomen helemaal te blokkeren door de eigenschap voor het zoomen van de gebruiker in te stellen op vast. Het is echter noodzakelijk om te zoomen, vooral op smartphones, voor toegankelijkheid en ik zou het gebruik van deze eigenschap aanbevelen.
Nog een zeer nuttige eigenschap stelt ons in staat onze webpagina te vergrendelen in de liggende of portretmodus:
@viewport {orientation: landscape;}Dit is het slechte nieuws: deze regel wordt momenteel alleen ondersteund door Internet Explorer 10 en Opera en vereist respectievelijk de -ms- en -o- browser-voorvoegsels.
Hoewel dat op zijn zachtst gezegd teleurstellend is, zou het feit dat viewport-functionaliteit al beschikbaar is in de meeste browsers betekenen dat dit een eenvoudige regel is om op te pikken. Hopelijk beginnen we het te zien, het wordt heel snel ingebracht in nightly builds.
Geeft u om normen-naleving? Helpt of belemmert het W3C de voortgang op het web? Laat het ons weten in de comments.
Uitgelichte afbeelding / thumbnail, venster afbeelding via LostBob-foto's