Viewport voor meedraaiende mobiele websites

Ervoor zorgen dat de webpagina in landscape-modus de beschikbare breedte ook gebruikt, in plaats van in te zoomen, in nog niet zo gemakkelijk.

Als je op een mobieltje een website bezoekt, dan wordt de site standaard uitgezoomd weergegeven. Dit komt omdat de meeste websites gemaakt zijn voor veel grotere schermen. Als je een site ontwerpt voor mobieltjes, dan voeg je een regeltje tussen de -tags dat het mobieltje niet moet uitzoomen:

Bezoekers die werken met de standaardbrowsers van iOS en Android zullen iets vreemds opmerken als ze hun telefoon draaien naar landscape-modus: in plaats van dat de webpagina gebruik maakt van de extra horizontale ruimte, zoomt de browser nog wat in, waardoor er nog maar heel weinig op het scherm past. Windows Phone-gebruikers hebben hier geen last van.

De oplossing is eenvoudig: vervang het regeltje door net volgende regeltje:

Nu maakt de webpagina op iOS en Android wel gebruik van de extra ruimte op landscape-modus. Helaas doet Windows Phone precies het omgekeerde: de webpagina zoomt in op landscape-modus.

Nou ben je misschien geneigd om wat browserdetectie toe te voegen, om zo het juiste stukje HTML te versturen:

    // Onnodig complexe code!
    if (navigator.userAgent.indexOf("Trident") >= 0) {
        // Internet Explorer
        document.write('');   
    } else {
        // Andere browsers
        document.write('');
    }

Dit is echter nergens voor nodig, je kunt beide meta-tags combineren. Alle browsers zullen de pagina nu goed weergeven:

Zie hier voor meer uitleg