Et af nøglebegreberne i et responsivt design er ændringen af visningsstørrelse. Det skyldes, at mobile visningsporte varierer meget fra desktop viewports. For at kontrollere visningsportstørrelsen bruger vi traditionelt visningsport-metatagget.
Viewport-metataggen, som alle de værste browserudviklinger for sidste gang, er dog ikke W3C-gyldig. Det blev oprindeligt indført af Apple i Safari og er siden blevet vedtaget af andre browsere. Dette resulterer i en inkonsekvent implementering.
Heldigvis har W3C redet til vores redning igen ved at indføre @viewport CSS-reglen.
Ved hjælp af den gamle metatag-tilgang, så kan vi fortælle browseren, hvilken størrelse visningsporten skal ses som:
Bortset fra at være ugyldig, er viewport instruktionen ikke data, det er præsentation. Så, at holde sig til vores data og præsentation adskillelsesprincipper, viewport instruktion skal være i CSS, ikke HTML.
W3C-løsningen i CSS ser sådan ud:
@viewport {width: device-width;}Eller alternativt kan du indstille visningsporten med et nummer, som sådan:
@viewport {width: 640px;}Du kan bruge @viewport-reglen sammen med @media-forespørgsler for at tvinge enhver visningsport større end 960 til at krympe til 960px, som sådan:
@media screen and (min-width: 960px){@viewport {width: 960px;}}@Viewport-reglen tillader os også at zoome ind på en side som standard, og endda indstille den maksimale zoom:
@viewport {width: 960px;zoom: 1;max-zoom: 3;}Det er muligt at blokere helt ved at indstille brugerzoomegenskaben til fast. Men zooming, især på smartphones, er nødvendig for tilgængelighed, og jeg vil anbefale at bruge denne ejendom.
En anden meget nyttig ejendom giver os mulighed for at låse vores webside i landskabs- eller portrættilstand:
@viewport {orientation: landscape;}Her er de dårlige nyheder: I øjeblikket er denne regel kun understøttet af Internet Explorer 10 og Opera, og kræver henholdsvis -ms- og -o- browser præfikserne.
Selvom det er skuffende at sige det mildt, skal det faktum, at viewport-funktionalitet allerede er tilgængeligt i de fleste browsere, betyde, at dette er en simpel regel at afhente. Forhåbentlig begynder vi at se det introduceres i natlige bygninger meget kort tid.
Er du interesseret i standarder? Overholdelse? Gør W3C hjælp eller hindre fremskridt på nettet? Lad os vide i kommentarerne.
Fremhævet billede / miniaturebillede, vinduesbillede via LostBob Photos