Ett av nyckelbegreppen i någon responsiv design är förändringen av visningsstorlek. Det beror på att mobila visningsportioner varierar kraftigt från skrivbordsvyn. För att styra visningsportstorleken använder vi traditionellt metadaggen för visningsport.

Viewport-metakoden, som alla de värsta webbläsarutvecklingarna för den sista för evigt, är dock inte W3C-giltig. Det introducerades ursprungligen av Apple i Safari och har sedan dess antagits av andra webbläsare. Detta resulterar i en inkonsekvent implementering.

Lyckligtvis har W3C ridit till vår räddning igen genom att introducera @viewport CSS-regeln.

Gamla skolan

Med hjälp av den gamla metataggen så här kan vi berätta för webbläsaren vilken storlek visningsporten ska se som:

CSS-regeln

Bortsett från att vara ogiltig är viewportinstruktionen inte data, det är presentation. Så, enligt våra principer för data och presentation, måste viewportinstruktionen vara i CSS, inte HTML.

W3C-lösningen i CSS ser ut så här:

@viewport {width: device-width;}

Eller alternativt kan du ställa in visningsporten med ett nummer, som så:

@viewport {width: 640px;}

Du kan använda @viewport-regeln i samband med @media-frågor för att tvinga visningsporten större än 960 att krympa till 960px, så här:

@media screen and (min-width: 960px){@viewport {width: 960px;}}

Ytterligare egenskaper

Med @viewport-regeln kan vi också zooma in i en sida som standard och till och med ställa in maximal zoom:

@viewport {width: 960px;zoom: 1;max-zoom: 3;}

Det går att blockera zoomning helt genom att ställa in användarzoomsegenskapen. Men zoomning, särskilt på smartphones, är nödvändig för tillgänglighet och jag rekommenderar att du använder den här egenskapen.

En annan mycket användbar egenskap gör det möjligt för oss att låsa vår webbsida i landskap eller stående läge:

@viewport {orientation: landscape;}

Webbläsarstöd

Här är de dåliga nyheterna: För närvarande stöds denna regel bara av Internet Explorer 10 och Opera, och kräver respektive -ms- och -o- webbläsarprefix.

Även om det är en besvikelse att säga minst är det faktum att visningsfunktionalitet redan är tillgänglig i de flesta webbläsare, menar att det här är en enkel regel att hämta. Förhoppningsvis börjar vi se det introduceras i nattliga byggnader inom kort.

Bryr du dig om standarder? Hjälper eller hindrar W3C framsteg på webben? Låt oss veta i kommentarerna.

Utvalda bild / miniatyrbild, fönsterbild via LostBob Photos