iPhone / iPad Skalierungsproblem beim drehen ins Querformat

Webentwickler die auch für iOS-Geräte Programmieren, sind sicherlich auch das eine oder andere mal darüber gestolpert, dass wenn man das Gerät vom Hoch- ins Querformat dreht in die angezeigte Website hinein gezoomt wird. Einige werden damit sicherlich keinerlei Probleme habe, allerdings diejenigen die mit der für die jeweilige Ausrichtung optimierte Breite arbeiten, die werden sich maßlos über das Problem ärgern, immerhin passt man die Breite extra an und dann Zoomt das Gerät hinein und macht die ganze investierte Zeit zunichte.


Mittlerweile hat auch Apple das Problem erkannt und es mit der Firmware iOS6 gefixt. Allerdings sollte man sich nicht darauf verlassen, das dass Problem damit aus der Welt wäre, es gibt viele iOS Nutzer, die Ihre Geräte auspacken, aktivieren und dann nichts von irgend welchen Updates mehr wissen wollen. Um für diese Zielgruppe das Layout trotzdem vernünftig dazustellen, bietet es sich an diesen Bug zu beseitigen

Das Zoomen in die Website verhindern
Der Fehler ist darauf zurück zu führen, dass das Hinein zoomen über die 2-Finger-Gester auf der Website erlaubt ist. Beim drehen ins Querformat kann es dann dazu kommen, dass die Breite des Angezeigten Bereiches nicht richtig bestimmt wird und er demnach zu stark hinein zoomt.

Dieses hinein zoomen kann man allerdings ganz leicht verhindern, in dem man eben diese 2 Finger Zoom-Funktion deaktiviert. Um sie zu deaktivieren, muss die Minimum- und Maximum- Skalierung der Website auf Faktor 1 gesetzt werden, die damit das zoomen unterbindet.

Das heißt zwar auch, dass der Nutzer selbst wenn er wollte nicht mehr zoomen kann, aber dafür haben wir ja schließlich eine angepasste Mobile-Version entwickelt.

Folgender Meta-Tag wird dafür in den Head-Bereich der HTML-Datei gesetzt:

<meta name=”viewport” content=”width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1″ />
Über den Autor
Danny Schulz
Ich arbeite als Webdesigner / Frontend-Developer in einer Online-Marketing Agentur in Hamburg. Dort bin ich für die Umsetzung verschiedener Webprojekte verantwortlich, wodurch ich mir bereits einiges an Erfahrungen in vielen Bereichen der Webentwicklung aneignen konnte.

Schreibe einen Kommentar

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