HTML5 Boilerplate: Meta Viewport und width=device-width

Ich baue eine adaptive/responsive Website.

Zu dieser kürzlichen Änderung am HTML5BP:

“mobile/iOS-CSS-Revisionen“

Ich habe angefangen zu verwenden:

<meta name="viewport" content="width=device-width">

… und ich habe das in meinem CSS:

html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

Wann initial-scale=1 enthalten war, führte das Drehen von vertikal nach horizontal (auf iPad/iPhone) dazu, dass sich das Layout von 2 Spalten (z. B.) auf 3 Spalten änderte (aufgrund von Meida-Abfragen, initial-scale=1 und JS-Fix für Viewport-Skalierungsfehler).

Zusammenfassenim Querformat zoomt dies die Seite:

<meta name="viewport" content="width=device-width">

… und das nicht:

<meta name="viewport" content="width=device-width, initial-scale=1">

Notiz: Sie können diesen Zoomeffekt in Aktion sehen, wenn Sie die anzeigen HTML5BP-Website auf einem iPad/iPhone.

Meine Fragen:

1. Wird dies zum neuen Standard (dh Zoom im Querformat)?
2. Ich habe eine Menge Zeit damit, meinen Kollegen und Vorgesetzten diese Änderung zu erklären … Sie sind daran gewöhnt, im horizontalen Modus ein anderes Layout zu sehen; Jetzt, wo die Seite gezoomt wird und das Layout gleich bleibt (außer dass es größer ist). Irgendwelche Tipps, wie man das den unwissenden Massen erklären kann (zu denen ich vielleicht gehören könnte)?

@robertc: Danke! Das ist sehr hilfreich.

Ich mag eigentlich nicht die haben initial-scale=1; Es sind meine Kollegen, die es gewohnt sind, zu sehen, wie sich das Layout ändert, anstatt zu zoomen. Ich bin sicher, ich werde es sein gezwungen hinzufügen initial-scale=1 nur um es allen recht zu machen (weil nicht zoomen und sehen, wie sich das Layout ändert, ist das, was sie gewohnt sind).

Mir ist gerade das HTML5BP aufgefallen index.html auf githubund Die Webseitebenutzte <meta name="viewport" content="width=device-width">; Für mich ist das Grund genug, abzuhauen initial-scale=1aber ich bekomme hochgezogene Augenbrauen, wenn ich versuche, es zu erklären diese Dinge an die “Nicht-Geeks”. 😀

Es ist kein neuer Standard, so hat es AFAIK immer funktioniert. Wenn Sie die Breite auf eine feste Anzahl von Pixeln festlegen, ändert das Drehen vom Hochformat ins Querformat nur den Maßstab, da die Anzahl der virtuellen Pixel konstant bleibt. Ich vermute, dass hinzufügen initial-scale=1 blockiert die Skalierung, wenn Sie zwischen ihnen wechseln – das heißt, der Skalierungsfaktor Ihrer Seite ändert sich nicht, wenn das Gerät gedreht wird. Wie sieht die Seite aus, wenn Sie sie zunächst im Querformat statt im Hochformat laden?

Ich würde vorschlagen, dass, wenn Sie das Verhalten wünschen, das Sie erhalten, wenn Sie angeben initial-scale=1dann spezifizieren initial-scale=1. HTML5 BoilerPlate ist etwas, was Sie sind soll nach eigenen Wünschen zu modifizieren.

Apfel [somewhat] beschreibt klar das Viewport-Verhalten hier.

Gerätebreite und Gerätehöhe beziehen sich bei iOS-Geräten hauptsächlich auf die Bildschirmabmessungen im Hochformat. Wenn Sie die Viewport-Breite auf Gerätebreite setzen, entspricht dies der Einstellung auf a konstanter Wert. Wenn sich die physische Breite des Bildschirms bei einer Änderung des Seitenverhältnisses ändert, dehnt der Browser daher die Konstante Größe, die Sie eingegeben haben, an die Breite des Bildschirms im Querformat anpassen. Dieses Verhalten ist weder falsch noch richtig, es ist einfach so.

Apple schlägt vor width=device-width für Apps, die auf die Plattform zugeschnitten sind, also ist es sicherlich die “Apple” -Methode:

Wenn Sie eine Webanwendung speziell für iOS entwerfen, ist die empfohlene Größe für Ihre Webseiten die Größe des sichtbaren Bereichs unter iOS. Apple empfiehlt, die Breite auf Gerätebreite einzustellen, damit der Maßstab im Hochformat 1,0 beträgt und die Größe des Ansichtsfensters nicht geändert wird, wenn der Benutzer ins Querformat wechselt.
[ie. The viewport retains portrait device width, but is scaled or stretched for presentation to fit the landscape width]

Persönlich bevorzuge ich den Ansatz „initial-scale=1.0“ ohne Einstellung der absoluten Gerätebreite, da der Darstellungsbereich dadurch immer den Gerätebildschirm ausfüllt, ohne ihn zu dehnen. Apple betrachtet dieses gültige Markup ebenfalls:

Abbildung 3-14 zeigt dieselbe Webseite, wenn die Anfangsskalierung auf dem iPhone auf 1,0 eingestellt ist. Safari unter iOS leitet die Breite und Höhe ab, um die Webseite in den sichtbaren Bereich einzupassen. Die Ansichtsfensterbreite ist im Hochformat auf Gerätebreite und im Querformat auf Gerätehöhe eingestellt.

Um ein kleines Update hinzuzufügen: Dies ist noch in Entwurfsform, aber es ist definitiv etwas, das man sich ansehen sollte. Hat auch eine vorangestellte Version für IE 10-Unterstützung. Durch die Verwendung von CSS anstelle von HTML wird eine Menge Verwirrung beseitigt, über die Sie sprechen, indem Sie die anwenden initial-scale:1; zu zoom:1; und geben min/max Optionen für width, height& zoom was den Einstellbereich weiter vergrößert, falls dies erforderlich sein sollte.

extend-to-zoom zur Rettung! (http://dev.w3.org/csswg/css-device-adapt/#lsquoextend-to-zoomrsquo)

<meta name="viewport" content="initial-scale=1.0"> wird übersetzt in…

@viewport{
  zoom: 1.0;
  width: extend-to-zoom;
}
@-ms-viewport{
  width: extend-to-zoom; 
  zoom: 1.0;
}

wohingegen <meta name="viewport" content="width:device-width,initial-scale=1.0"> wird übersetzt in…

@viewport{
  zoom: 1.0;
  width: device-width; /* = 100vw */
}
@-ms-viewport{
  width: device-width;
  zoom: 1.0;
}

Notiz: width:extend-to-zoom 100%; ist gleich width:device-width;

http://dev.w3.org/csswg/css-device-adapt/

ich fand Mozillas Viewport-Erklärung die ausführlichste und hilfreichste. Hier ein Auszug:

Die width-Eigenschaft steuert die Größe des Ansichtsfensters. Es kann auf eine bestimmte Anzahl von Pixeln eingestellt werden width=600 oder auf den speziellen Wert device-width, der die Breite des Bildschirms in CSS-Pixeln bei einer Skalierung von 100 % darstellt. (Es gibt entsprechende height und device-height Werte, die für Seiten mit Elementen nützlich sein können, deren Größe oder Position basierend auf der Höhe des Darstellungsbereichs geändert wird.)

Das initial-scale -Eigenschaft steuert die Zoomstufe beim ersten Laden der Seite. Das maximum-scale, minimum-scaleund user-scalable Eigenschaften steuern, wie Benutzer die Seite vergrößern oder verkleinern dürfen

hast du das versucht?

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">