Et av hovedkonseptene i enhver responsiv design er endringen av visningsportstørrelse. Det skyldes at mobile visningsporte varierer sterkt fra skrivebordsvisningsportene. For å kontrollere visningsportstørrelsen bruker vi tradisjonelt visningsport-metataggen.
Viewport-metakoden, som alle de verste nettleserutviklingene for siste for alltid, er imidlertid ikke W3C-gyldig. Det ble opprinnelig innført av Apple i Safari og har siden blitt vedtatt av andre nettlesere. Dette resulterer i en inkonsekvent implementering.
Heldigvis har W3C reddet til vår redning igjen ved å introdusere @viewport CSS-regelen.
Ved å bruke den gamle metakoden-tilnærmingen, kan vi fortelle nettleseren hvilken størrelse visningsporten skulle se som:
Helt bortsett fra å være ugyldig, er visningsinstruksjonen ikke data, det er presentasjon. Så, i tråd med våre data- og presentasjonsavviklingsprinsipper, må viewport-instruksjonen være i CSS, ikke HTML.
W3C-løsningen i CSS ser slik ut:
@viewport {width: device-width;}Eller alternativt kan du sette visningsporten med et tall, slik som:
@viewport {width: 640px;}Du kan bruke @viewport-regelen sammen med @media-spørringer for å tvinge et visningsport større enn 960 til å krympe til 960px, slik som:
@media screen and (min-width: 960px){@viewport {width: 960px;}}@Viewport-regelen tillater oss også å zoome inn på en side som standard, og til og med angi maksimal zoom:
@viewport {width: 960px;zoom: 1;max-zoom: 3;}Det er mulig å blokkere zooming helt ved å sette brukerzoomsegenskapen til fast. Men zooming, spesielt på smarttelefoner, er nødvendig for tilgjengelighet, og jeg vil anbefale å bruke denne egenskapen.
En annen veldig nyttig egenskap gjør det mulig for oss å låse vår nettside i liggende eller stående modus:
@viewport {orientation: landscape;}Her er de dårlige nyhetene: For øyeblikket støttes denne regelen bare av Internet Explorer 10 og Opera, og krever henholdsvis -ms- og -o- nettleserprefiksene.
Selv om det er skuffende å si mildt, må det faktum at viewport-funksjonalitet allerede er tilgjengelig i de fleste nettlesere, bety at dette er en enkel regel å plukke opp. Forhåpentligvis begynner vi å se det introduseres i nattlig bygg veldig kort.
Bryr du deg om standardoverensstemmelse? Gjøre W3C hjelp eller hindre fremgang på nettet? Gi oss beskjed i kommentarene.
Utvalgt bilde / miniatyrbilde, vindubilde via LostBob Photos