iOS-Bug: Skalierungs­fehler beim Drehen ins Querformat

Betrachtet man eine mobile Website auf dem iPhone und dreht das Gerät vom Hoch- ins Querformat, schlägt er meist zu: der iOS-Scale-Bug.

Skalierungsfehler beim Wechsel ins Querformat

Dreht man ein Website ins Querformat (Landscape), die per Quellcode das Hineinzoomen über die 2-Finger-Geste „Pinch-to-Zoom” erlaubt, tritt der iOS-Scale-Bug auf: Die Breite des Viewports wird nicht richtig bestimmt und es fehlt ein bisschen, da zu nah reingezoom wird (siehe Abbildung). Der Nutzer muss deshalb händisch etwas herauszoomen.

Dieser Bug existiert schon seit längerer Zeit und wurde auch in iOS 5 nicht gefixt. Interessant ist allerdings, dass der Fehler in In-App-Browsern nicht auftritt. Native iOS-Apps, die die WebView benutzen, sind also nicht betroffen (obwohl die zugrunde liegenden WebView die gleiche ist wie bei Mobile Safari).

Wer dies selbst ausprobieren möchte: Einfach die folgende Beispielseite auf einem aktuellen iPhone von Hochformat (Portrait) ins Querformat (Landscape) drehen.

Wie kann der „iOS-Scale-Bug” verhindert werden?

Zoom ausschalten

Der Bug kann ganz leicht verhindert werden, indem man das Zoomen mit 2 Fingern („Pinch-to-Zoom”-Geste) ausschaltet. Dazu setzt man einfach die Minimum- und Maximum-Skalierung der Webseite auf den Faktor 1, womit kein anderer Zoomgrad möglich. Der Haken an der Sache: Man schränkt den Nutzer ein, da er nicht mehr wie gewohnt zoomen kann, was somit aus Usabilitygründen eigentlich nicht empfehlenswert ist. Dass das Problem dann nicht auftritt, zeigt diese Beispielseite.

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

Workaround mittels Accelerometer

Seit kurzem gibt es einen Fix, der anhand des Beschleunigungssensor des Device bemerkt, wenn das Gerät gedreht wurde. Daraufhin deaktiviert das Skript kurzzeitig den Zoom, so dass die Skalierung im Querformat korrekt erfolgen kann. Anschließend wird der Zoom wieder aktiviert.

This fix works by listening to the device’s accelerometer to detect when an orientation change is about to occur. When it deems an orientation change imminent, the script disables user zooming, allowing the orientation change to occur properly, with zooming disabled. The script restores zoom again once the device is either oriented close to upright, or after its orientation has changed.

Was zunächst nach einem nicht sehr vertrauenswürdigen Workaround klingt, dürfte dennoch recht solide sein, da auch die kommende jQuery Mobile Version 1.1 diesen Fix integriert hat. Getestet wurde das Skript laut Autor auf iOS 4 und iOS 5. Ausprobieren lässt sich dies ebenfalls an einer Beispielseite

<script src="ios-orientationchange-fix.js"></script>

Link: A Fix for the iOS Orientationchange Zoom Bug
Link: iOS-Orientationchange-Fix (Github)