Warum Seiten auf iOS 9 skaliert werden

shrink to fit auf iOS9

Neulich habe ich eine Website in unterschiedlichen Browsern durchgetestet und da ist mir aufgefallen, dass sie auf iOS 9 beim Laden kurz runter skaliert wird und dann auf die eigentliche Größe springt. Das ist bei jedem Click auf einen Link passiert, was auf Dauer sehr nervig war. Ich konnte nicht herausfinden, was der eigentliche Grund war für das hin und her springen (wahrscheinlich habe ich irgendwas bei den Abmessungen verpfuscht ;)), aber zumindest weiß ich jetzt warum auf iOS 9, und nur auf iOS 9, überhaupt irgendetwas skaliert wird.

shrink-to-fit=no

Seit iOS9 ist es so, dass Seiten mit Inhalt, der über den Viewport hinausgeht, runter skaliert werden damit der Inhalt Platz findet. Das passiert nur dann, wenn man den viewport Meta Tag mit width=device-width angibt, also quasi so gut wie immer. Das klingt durchaus sinnvoll, ist aber nicht immer erwünscht.

Ich habe eine ganz simple Demo vorbereitet: 5 divs (je 250px width + 6px margin-right), also insgesamt 1280px breit.

Safari auf iOS 9 ohne shrink-to-fit
Bei einer Viewportbreite von 1024px auf dem iPad sollte man nur 4 divs (256 * 4) sehen, aber auf dem Screen sind 5 zu sehen.

shrink-to-fit

Die Lösung ist eine zusätzliche Angabe im viewport Meta-Tag. Mit shrink-to-fit=no verhält sich der Browser wieder wie früher/erwartet/erwünscht – anders ;)

<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">

Safari auf iOS 9 mit shrink-to-fit
shrink-to-fit-no

Eine genauere Erklärung und Hintergründe gibt es auf bitsofcode.

Manuel Matuzovic

Frontend Developer aus Wien.

Schreibe einen Kommentar

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