Was bewirkt das Metaattribut "Anpassen des Ansichtsfensters"?

143

Ich habe Probleme, die Dokumentation dafür zu finden. Ist es Safari-spezifisch?

Es gab kürzlich einen Fehler in iOS 9 ( hier ), dessen Lösung das shrink-to-fit=noMeta des Ansichtsfensters erweitert.

Was macht dieser Code?

html safari webkit ios9 viewport 755
quelle

Antworten:

193

Es ist zumindest zum Zeitpunkt des Schreibens Safari-spezifisch und wird in Safari 9.0 eingeführt. Aus dem "Was ist neu in Safari?" Dokumentation für Safari 9.0 :

Änderungen am Ansichtsfenster

Mit Viewport-Meta-Tags wird "width=device-width"die Seite verkleinert, um sie an Inhalte anzupassen , die über die Grenzen des Ansichtsfensters hinausgehen. Sie können dieses Verhalten überschreiben, indem "shrink-to-fit=no"Sie es wie unten gezeigt zu Ihrem Meta-Tag hinzufügen . Der Mehrwert verhindert, dass die Seite an das Ansichtsfenster angepasst wird.

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

Kurz gesagt, wenn Sie dies dem Meta-Tag des Ansichtsfensters hinzufügen, wird das Verhalten vor Safari 9.0 wiederhergestellt.

Beispiel

Hier ist ein visuelles Beispiel, das den Unterschied beim Laden der Seite in den beiden Konfigurationen zeigt.

Der rote Bereich entspricht der Breite des Ansichtsfensters und der blaue Bereich befindet sich außerhalb des ursprünglichen Ansichtsfensters (z left: 100vw. B. ). Beachten Sie, wie im ersten Beispiel die Seite so vergrößert wird, dass sie passt, wenn sie shrink-to-fit=noweggelassen wird (wodurch der Inhalt außerhalb des Ansichtsfensters angezeigt wird) und der blaue Inhalt im letzteren Beispiel außerhalb des Bildschirms bleibt.

Den Code für dieses Beispiel finden Sie unter https://codepen.io/davidjb/pen/ENGqpv .

Ohne Anschrumpfen angegeben

Ohne Schrumpfen = nein

Mit Schrumpfen = Nr

Mit Schrumpfen = Nr

davidjb
quelle
2
Es tut mir leid, aber ich verstehe immer noch nicht, was dieser Code tut. Können Sie es anders erklären? Vielen Dank!
Daniel Springer
3
@Dani Standardmäßig zoomt Safari eine Seite heraus, um sie an alle Inhalte anzupassen, die über das Ansichtsfenster hinausgehen (das erste Beispiel zeigt den blauen Bereich als sichtbar; das ist überfüllt). Das Festlegen shrink-to-fit=noverhindert dieses Verhalten, indem die Zoomstufe in Ruhe gelassen wird und der überlaufende Inhalt außerhalb des Bildschirms bleibt . Probieren Sie das Codepen-Beispiel auf Ihrem iDevice (oder iOS-Simulator) aus und ändern Sie die Einstellung. Vielleicht hilft es, die Veränderung interaktiv zu sehen.
Davidjb
2
Ah ich sehe. Aber warum sollte jemand wollen, dass ein Teil seines Inhalts auf kleineren Bildschirmen versteckt wird?
Daniel Springer
7
@Dani Verschiedene Gründe, aber schnelle Beispiele sind Schieberegler / Karussells, die Inhalte außerhalb des Ansichtsfensters platzieren, oder ansonsten große, nicht reagierende Inhalte (z. B. Bilder / Tabellen), die sonst überlaufen und den Rest der Seite mit der Standardeinstellung winzig werden lassen shrink-to-fitVerhalten. Mit shrink-to-fit=nobleibt die Seite in der erwarteten Größe, sodass der Inhalt über das Ansichtsfenster läuft. Ein Benutzer kann (normalerweise) immer noch scrollen oder verkleinern, um den Überlaufinhalt anzuzeigen, aber das anfängliche Ansichtsfenster entspricht der Gerätegröße.
Davidjb
2
@davidjb Ich denke, dies ist mit dem neuesten iOS 11 behoben. Ich kann diesen Fehler nicht reproduzieren.
Zeel Shah
12

Als Statistik zur iOS-Nutzung wird angegeben, dass die Nutzung von iOS 9.0-9.2.x derzeit bei 0,17% liegt. Wenn diese Zahlen wirklich auf die weltweite Verwendung dieser Versionen hinweisen, ist es sogar noch sicherer, das Schrumpfen aus Ihrem Ansichtsfenster-Meta-Tag zu entfernen.

Nach 9.2.x. IOS entfernt diese Tag-Prüfung in seinem Browser.

Sie können diese Seite unter https://www.scottohara.me/blog/2018/12/11/shrink-to-fit.html überprüfen

GGGin
quelle