shrink-to-fit=no Ergänzung bei der viewport-Meta-Angabe
Geschrieben am:
Bei einer Schulung zum Thema Responsive Webdesign bin ich über die Ergänzung shrink-to-fit innerhalb einer Viewport-Angabe gestolpert.
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">Neu war mir der Zusatz shrink-to-fit=no
shrink-to-fit=no ist eine sinnvolle Ergänzung bei der viewport-Angabe, gilt aber nur für Safari, und zwar:
- iOS ab Version 9
- Safari im Split oder Side-View-Modus (was beispielsweise ältere iPads noch nicht kennen). Dieser Modus erlaubt es, mehrere Apps gleichzeitig nutzen zu können oder eben zwei Fenster gleichzeitig zu öffnen und zu nutzen.
In diesem Split oder Side-View-Modus beeinflusst die shrink-to-fit, wie sich Elemente verhalten sollen, die eine fixe Breite haben und breiter sind als der im Split- oder Side-View-Modus zur Verfügung stehender Platz:
- Ohne die Angabe wird alles so verkleinert (shrink), dass es auf den geringeren verfügbaren Platz passt. Wenn wir beispielsweise ein 900px breites Element haben, so wird die Webseite gesamt zu verkleinert, dass dieses Element ganz zu sehen ist. Das bedeutet natürlich, dass damit der Text auch zu klein werden kann.
- Mit
shrink-to-fit=nofindet diese Verkleinerung hingegen nicht statt, der Benutzer muss bei einem 900px breiten Element beispielsweise horizontal scrollen.
Link mit Screenshots