Viewport meta tag

Met de viewport meta tag kun je de breedte en schaal van je website instellen voor mobiele apparaten. Dit is essentieel, je geeft namelijk weer wat 100% is. Doe je dit niet dan zal je website op een mobiel apparaat als gewone website getoond worden. Met als gevolg dat het geheel klein weergegeven zal worden.

 

Video’tje kijken?

Een uitleg van Lynda.com over hoe een mobiel apparaat een website toont:

 

Y.Bruin

De viewport meta tag staat, net als alle meta tags, in de head van de pagina.

<meta name=”viewport” content=”width=640, height=480, user-scalable=yes, initial-scale=1.0, maximum-scale=5.0, minimum-scale=1.0″ />

Het gebeurt met name in het content stuk:

  • bij width en height geef je de basismaten aan van je site
  • User-scalable geeft aan of iemand mag inzoomen.
  • Initial-scale: geeft aan wat de basis schaal van een site is. Meestal staat dit op 1.0
  • Maximum-scale en minimum-scale: de maximale en minimale breedte tot waar iemand de pagina kan schalen.

Je kunt bij width gewoon device-width aangeven. Maar let wel even goed op wat je aangeeft bij user-scalable en maximum-scale. Indien je je gebruiker niet de mogelijkheid geeft om te schalen let er dan goed op dat je ontwerp goed gebruiksvriendelijk is! Niets is meer frustrerend dan niet kunnen inzoomen maar ook niet de tekst kunnen lezen.

Hieronder twee voorbeelden. Ik heb de mediaquery gebruikt welke hierboven staat. Via http://www.mobilephoneemulator.com/ kun je heel makkelijk je (online geplaatste!) website testen op diverse browsers. Wat gebeurt er?

Ik heb getest op een iPhone 6 met een schermbreedte van 640 pixels. Een van mijn mediaqueries zit tussen 580 en 800 pixels. Bij dat formaat wil ik twee lichtgrijze blokjes naast elkaar. Zonder viewport metatag gaat de mobiele browser uit van een schermbreedte van 387 pixels (zie “Website to emulate” box hieronder). Ik krijg dan mijn mobiele website te zien. Door de viewport metatag te plaatsen worden mijn mediaqueries netjes uitgevoerd op de maten die ik wens.

Geen viewport metatag

Geen viewport metatag. De mobiele browser gaat nu uit van een schermbreedte van 387 pixels. Mijn kleinste mediaquery wordt nu getoond.

Wel viewport metatag

Met viewport metatag. De mobiele browser ziet nu wel dat de website 640 pixels breed moet zijn. Mijn middelste mediaquery wordt getoond.

 

Viewport settings in je media-query

Naast het gebruik van een viewport metatag kun je ook in je mediaquery aangeven of er rekening gehouden moet worden met een bepaalde breedte (een getal) of met de breedte van het scherm van een device.

In het onderstaande voorbeeld wordt gekeken naar een device breedte van 640 pixels. Let op: dit is niet handig wanneer je aan het ontwikkelen bent: immers, je mediaquery werkt dan niet op de gewone computer maar alleen op een device (phone of tablet). Gebruik tijdens het ontwikkelen alleen maar width of max-width en geen device-width of max-device-width. Indien nodig kun je het later altijd aanpassen.

@media screen and (max-device-width: 640px){
/* some CSS here */
}

 

Let op iPad en iPhone

Ik kwam de volgende opmerking tegen op javascriptkit:

Just to complicate things even more, in iPhone and iPad devices, the device-width always corresponds to the width of the device in portrait mode (ie: 768px), regardless of whether the device is in that mode or landscape instead. With other devices, its device-width changes depending on its orientation.

Hierin wordt aangegeven dat een iPhone en iPad altijd uitgaan van de breedte bij portrait mode (staand), ook wanneer je je device in landscape mode (liggend) gebruikt.

@viewport CSS rule

Daarnaast is er de (tamelijk onbekende) @viewport CSS rule. Deze heb je nodig voor IE10’s “snap mode”. Dit is een optie waarbij het mogelijk is om 2 browser schermen naast elkaar te tonen op een mobiel. Om de een of andere reden wordt de viewport metatag dan niet uitgevoerd. De @viewport CSS rule wel.

De @viewport CSS rule is onderdeel van je CSS. Vergelijk het met de @font-face of de @media. Je stelt hier in feite dezelfde waarden in die je ook in je meta tag instelt maar ze heten een beetje anders:

@viewport{
width: device-width;
zoom:1;
max-zoom: 3;
min-zoom: 1;
user-zoom:fixed;
}

Hierbij is “zoom” vergelijkbaar met “initial-scale”, “max-zoom” met “maximum-scale”, “min-zoom” met “minimum-scale” en “user-zoom” met “user-scalable”.
Op dit moment wordt de @viewport rule door Opera en IE10 ondersteund. De verwachting is wel dat deze CSS rule de viewport metatag zal gaan vervangen. Wil je dit toch implementeren in andere browsers dan moet je prefixes gebruiken:

@-ms-viewport {
width: device-width;
}
@-o-viewport {
width: device-width;
}
@viewport {
width: device-width;
}

Een tip welke ik las op een blog van Teamtreehouse gaf aan dat je de @viewport rule kunt gebruiken BINNEN je @media rule voor een meer precieze instelling van je site:

@media screen and (max-width: 400px) {
@-ms-viewport { width: 320px; }

}

Of voor een nog gedetaileerde setting (tussen 640 en 1024 pixels bijvoorbeeld).

@media screen and (min-width: 640px) and (max-width: 1024px) {
@viewport { width: 640px; }

}

NB: een fluid lay-out zal dan weinig nut hebben omdat je aangeeft dat tussen 640 en 1024 pixels je site op een breedte van 640 pixels wordt getoond.

Link

Helder verhaal van Google over wat de viewport meta tag is.
Een handige pagina van javascriptkit waarin ingegaan wordt op width versus device-width en waar je ook een overzicht van schermbreedtes kunt vinden.