HTML - Metatags - Mobiele Metatag (viewport)


Ben je bezig met het ontwikkelen van een mobiele website dan is de onderstaande metatag eigenlijk vereist om te gebruiken. Met deze metatag vertel je aan mobiele browsers dat de website geoptimaliseerd is voor mobiele telefoons. Zo geef je aan hoe breed de pagina is en in hoeverre er moet / mag worden ingezoomd. De metatag wordt door vrijwel alle moderne mobiele browsers gezien zoals de mobiele versie van Safari.

Bijvoorbeeld in het geval van de iPhone zorg je er met onderstaande metatag voor dat de juiste breedte wordt gepakt en dat er op de juiste manier wordt ingezoomd om zodoende te voorkomen dat als iemand je website bezoekt deze te klein wordt weergegeven.

In onderstaand voorbeeld is er vanuit gegaan dat de site 320px breed is. Maar omdat niet iedere mobiel een even breed scherm heeft kun je hier ook in plaats van een breedte 'device-width' opgeven zodat er wordt uitgegaan van de breedte van het scherm. Pas verder de regel aan naar wens, in dit geval is het schalen door de bezoeker uitgezet.

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0">


Voorbeeld

Hieronder een voorbeeld zonder viewport metatag (links) en met de metatag (rechts).

Telefoonnummers

Met de onderstaande metatag stel je in dat telefoonnummers niet als dusdanig worden gemarkeerd. Men kan er dan niet meer op drukken, iets wat soms handig kan zijn.

<meta name="format-detection" content="telephone=no" />

Full-screen iPhone

Als laatste is er nog een metatag specifiek voor de iPhone om elementen zoals de adresbalk, zoekveld en andere knoppen te verbergen. Dit werkt alleen voor websites die zijn toegevoegd aan het beginscherm van de iPhone. Iemand die dit heeft gedaan ziet deze onderdelen dan niet in beeld na het openen waardoor de site meer op een app lijkt. Het is wel zo dat zodra een andere pagina geopend wordt er zal worden overgeschakeld naar Safari waarmee de werkbalken zoals de adresbalk weer in beeld verschijnen. Dit probleem kan opgelost worden door bijvoorbeeld gebruik te maken van jQuery Mobile.

<meta name="apple-mobile-web-app-capable" content="yes" />