HTML5 Mobile

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.


Beispiel: Ein Bild mit 100% Breite wird beim Wechsel ins Querformat nicht auf die Breite des Displays skaliert

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)

6 Kommentare zu: iOS-Bug: Skalierungs­fehler beim Drehen ins Querformat

Isabell
8. September 2012, 18:36

Danke für diesen Artikel!
Da bin ich mal gespannt, wann dieser Bug endlich behoben wird. Bei Microsoft oder Google wäre dies sicherlich schon längst passiert.

Isabell
24. September 2012, 06:46

Wurde dieser Fehler nun in iOS6 behoben?
Überprüfen kann ich das selbst nicht, weil ich kein iPhone und auch kein iPad habe.

flo
24. September 2012, 20:09

Ja, scheinbar wurde dieser Bug mit iOS6 endlich gefixt.

Isabell
25. September 2012, 12:20

Hallo Flo!
Danke für die Info

Kim
26. Mai 2013, 20:09

Nur zur Info: In iOS6 gibt es diesen Bug nach wie vor

Franz
11. Februar 2014, 14:52

Leider haben beide vorgeschlagenen Lösungen bei meiner Testseite keinerlei Effekt. 🙁

Hat jemand von Euch schon andere Lösungen gefunden/ausprobiert?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

*

*