Der iPod und das iPhone, verfügen über die Eigenheit, dass Webseiten automatisch verkleinert werden, sodass diese sicher auf den ganzen Display platz finden.

Das Problem: Manchmal will man das nicht :-)

Mit diesem Meta Tag lässt sich dies unterbinden:

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>

Smartphones verfügen über ein relativ großes Display mit z.B.: 800x480px Auflösung (Samsung Omnia II). Die Browser auf den Smartphones eifern ihren großen Vorbildern nach und so existieren auch im mobilen Bereich die klassischen Browser wie Opera, Internet Explorer oder Firefox.

Doch bei Smartphones und Handies existiert so manches Features, welche bei normalen Browsern nicht vorhanden sind: Automatischer Zoom oder auch das Drehen des Gerätes. Dies führt dazu, dass der Browser selbstständig das Bild dreht, wenn das Handy gedreht wird. Die Herausforderung ist nun, die Webseite erneut richtig zu skalieren, denn der zu erwartende Weg, dass das JavaScript-Event window.resize aufgerufen wird, ist ein Irrtum.

Die Lösung dieser Herausforderung – per Timer prüfen, ob sich die Richtung des Displays geändert hat und mittels einer Funktion “UpdateView” die Elemente am Display neu positionieren:

var lastWidth = screen.width;
var lastHeight = screen.height;
$(document).ready(function () {
    UpdateView();
    ChkOriChange();
});

//Orientation change method
function ChkOriChange() {
    if (screen.width != lastWidth || screen.height != lastHeight) {
        lastWidth = screen.width;
        lastHeight = screen.height;
        UpdateView();
    }
    window.setTimeout('ChkOriChange()', 100);
}
$(window).resize(function () {
    UpdateView();
});

Ich hoffe dieses Snippet spart so manche Recherchen.