Bevor wir uns mit Ihren Fragen befassen, wollen wir uns kurz ansehen, warum das viewport
Meta-Tag überhaupt existiert. Folgendes habe ich gesammelt.
Warum brauchen wir das viewport
Tag?
Ein Ansichtsfenster ist ein Bereich, in dem der Webinhalt angezeigt werden kann. Normalerweise ist die gerenderte Seite (Webinhalt) größer als das Ansichtsfenster. Daher verwenden wir normalerweise Bildlaufleisten, um den verborgenen Inhalt anzuzeigen (da im Ansichtsfenster nicht alles angezeigt werden kann). Zitiert aus CSS Device Adaptation Module Level 1 :
Das schmale Ansichtsfenster ist ein Problem für Dokumente, die in Desktop-Browsern gut aussehen sollen. Das Ergebnis ist, dass Anbieter von mobilen Browsern eine feste Initiale verwenden, die eine Blockgröße enthält, die sich von der Größe des Ansichtsfensters unterscheidet und der eines typischen Desktop-Browserfensters nahe kommt. Neben dem Scrollen oder Schwenken wird häufig das Zoomen verwendet, um zwischen einer Übersicht über das Dokument und dem Vergrößern bestimmter Bereiche des Dokuments zu wechseln, mit denen gelesen und interagiert werden soll.
Bei Mobilgeräten (und anderen kleineren Geräten) ist der anfängliche Block normalerweise größer als das Ansichtsfenster. Beispielsweise kann ein mobiles Gerät mit einer Bildschirmbreite von 640px
einen Anfangsblock enthalten 980px
. In diesem Fall wird der anfängliche enthaltende Block verkleinert, 640px
damit er in den mobilen Bildschirm passt. Diese 640px
Breite (Bildschirmbreite) wird als initial-width
Ansichtsfenster bezeichnet, das für unsere Diskussion relevant sein wird.
Also ... Warum brauchen wir diesen viewport
Tag? Nun, heutzutage haben wir Medienabfragen, mit denen wir für mobile Geräte entwerfen können. Diese Medienabfrage hängt jedoch von der tatsächlichen Breite des Ansichtsfensters ab. Auf Mobilgeräten formatiert der Benutzeragent die anfängliche Ansichtsfenstergröße automatisch in eine andere feste Größe (normalerweise größer als die anfängliche Ansichtsfenstergröße). Wenn also die Breite des Ansichtsfensters eines mobilen Geräts festgelegt ist, werden die CSS-Regeln, die wir in Medienabfragen verwenden, nicht ausgeführt, nur weil sich die Breite des Ansichtsfensters nie ändert. Mithilfe des viewport
Tags können wir die Breite des tatsächlichen Ansichtsfensters steuern (nachdem es von der UA gestaltet wurde). Zitiert aus MDN :
Dieser Mechanismus eignet sich jedoch nicht so gut für Seiten, die mithilfe von Medienabfragen für schmale Bildschirme optimiert wurden. Wenn das virtuelle Ansichtsfenster beispielsweise 980 Pixel groß ist, werden Medienabfragen mit einer Auflösung von 640 Pixel oder 480 Pixel oder weniger niemals verwendet, was die Effektivität solcher Seiten einschränkt reaktionsschnelle Designtechniken.
Beachten Sie, dass das viewport
Tag auch die Höhe des tatsächlichen Ansichtsfensters ändern kann, nicht nur die Breite
viewport
Stichworte width
Das width
in einem viewport
Tag wird max-width
in der @viewport
Regel übersetzt. Wenn Sie das width
as deklarieren device-width
, wird es 100%
in der @viewport
Regel übersetzt. Der Prozentwert wird basierend auf initial-width
dem Ansichtsfenster aufgelöst. Wenn wir also immer noch das obige Beispiel verwenden, max-width
wird das in einen Wert von aufgelöst 640px
. Wie Sie herausgefunden haben, gibt dies nur die an max-width
. Das min-width
wird automatisch sein extend-to-zoom
.
extend-to-zoom
Ihre Frage war, was genau der Wert von "Zoom erweitern" ist . Nach dem, was ich gesammelt habe, ist es der Wert, der verwendet wird, um das Ansichtsfenster zu unterstützen, das sich selbst erweitert, um es an den Anzeigebereich bei einer bestimmten Zoomstufe anzupassen. Mit anderen Worten, es handelt sich um einen Wert für die Ansichtsfenstergröße, der sich basierend auf dem angegebenen Zoomwert ändert. Ein Beispiel? Vorausgesetzt, der max-zoom
Wert des UA-Stylesheets ist 5.0
und initial-width
ist 320px
, <meta name="viewport" content="width=10">
wird auf eine anfängliche tatsächliche Breite von aufgelöst 64px
. Dies ist sinnvoll, da, wenn ein Gerät nur 320 Pixel hat und nur 5x
der normale Wert gezoomt werden kann, die minimale Größe des Ansichtsfensters wäre 320px divided by 5
, was bedeutet, dass jeweils nur 64 Pixel angezeigt werden ( und nicht) 10px
denn dafür müsste man 32x zoomen!). Dieser Wert wird vom Algorithmus verwendet, um zu bestimmen, wie die min-width
und max-width
-Werte erweitert (geändert) werden sollen, was bei der Bestimmung der tatsächlichen Breite des Ansichtsfensters eine Rolle spielt.
Alles zusammenfügen
Was ist also im Wesentlichen der Unterschied zwischen <meta name="viewport" content="width=device-width, initial-scale=1.0">
und <meta name="viewport" content="initial-scale=1.0">
? Wiederholen Sie einfach die Schritte des Algorithmus ( dies und das ). Lassen Sie uns zuerst Letzteres (das ohne width
Attribut) tun . (Wir gehen davon aus, dass das initial-width
des Ansichtsfensters ist 640px
.)
width
Ist das nicht ergibt gesetzt, max-width
und min-width
ist extend-to-zoom
in der @viewport
Regel.
initial-scale
ist 1.0
. Dies bedeutet, dass der zoom
Wert auch ist1.0
- Lassen Sie uns lösen
extend-to-zoom
. Schritte:
extend-zoom = MIN(zoom, max-zoom)
. Die MIN
Operation wird in den Wert aufgelöst, der nicht ist auto
. Hier zoom
ist 1.0
und max-zoom
ist auto
. Das heißt das extend-zoom
ist1.0
extend-width = initial-width / extend-zoom
. Das ist einfach; Teilen Sie 640 durch 1. Sie erhalten extend-width
ist gleich640
- Da dies
extend-zoom
nicht der Fall ist, springen auto
wir zur zweiten Bedingung. max-width
ist in der Tat extend-to-zoom
, das bedeutet, dass eingestellt max-width
wird extend-width
. Somit,max-width = 640
min-width
auch ist extend-to-zoom
, bedeutet dies , Einstellung min-width
zu max-width
. Wir bekommenmin-width = 640
- Nach dem Auflösen der Nicht-
auto
(dh der extend-to-zoom
) Werte für max-width
und min-width
. Wir können mit dem nächsten Verfahren fortfahren . Da min-width
oder max-width
nicht ist auto
, werden wir die erste Verwendung if
in dem Verfahren, so dass die ursprüngliche tatsächliche Darstellungseinstellung width
an MAX(min-width, MIN(max-width, initial-width))
, das entspricht MAX(640, MIN(640, 640))
. Dies wird 640
für Ihr erstes tatsächliches Ansichtsfenster aufgelöstwidth
- Fahren Sie mit dem nächsten Verfahren fort . In diesem Schritt
width
ist nicht auto
. Der Wert wird nicht geändert und wir erhalten das tatsächliche Ansichtsfenster width
von640px
Lassen Sie uns das erstere tun.
width
gesetzt ist, führt dies in max-width
sein 100%
( 640px
in unserem Fall) und min-width
sind extend-to-zoom
in der @viewport
Regel.
initial-scale
ist 1.0
. Dies bedeutet, dass der zoom
Wert auch ist1.0
- Lassen Sie uns lösen
extend-to-zoom
. Wenn Sie die Schritte sorgfältig befolgen (fast wie oben), erhalten Sie ein max-width
von 640px
und ein min-width
von 640px
.
- Sie können das Muster jetzt wahrscheinlich sehen. Wir erhalten die tatsächliche Breite des Ansichtsfensters von
640px
.
Was ist der wahrgenommene Unterschied? Im Wesentlichen keine . Beide machen das Gleiche. Hoffe meine Erklärung hilft ;-) Wenn etwas nicht stimmte, sag es mir.
1.0
, aber ich bin mir nicht sicher. Wie auch immer, tolle Antwort, danke!viewport
Tag-Attributs einen wahrgenommenen Unterschied feststellen können, besteht darin, dass Sie das nicht angebeninitial-scale
. Wenn Sie beispielsweise schreiben<meta name="viewport" content="360px">
, wissen Sie, dass Sie die anfängliche Zoomstufe nicht steuern. Aus meinen begrenzten Tests geht hervor, dass der UA-Stil das Ansichtsfenster immer verkleinert (durch ein Verfahren, das möglicherweise nicht normativ ist). Das tatsächliche Ansichtsfenster bleibt jedoch360px
unabhängig von der Größe des ursprünglichen Ansichtsfensters immer auf einer Breite von .<meta name="viewport" content="360px", initial-scale=1.0>
, erstellen Sie den Wertmin-width
zuextend-to-zoom
und koppeln ihn mit einemzoom
Wert. Dadurch wird immer der größte Wert zwischen der anfänglichen Breite des Ansichtsfensters geteilt durch den Zoomwert und dem Wert aufgelöstmax-width
. In der Einschränkungsprozedur (Abschnitt 7.2) sehen Sie, dass diewidth = MAX(min-width, MIN(max-width, initial-width))
. Aus meinen begrenzten Tests kann ich schließen, dass wenn dermax-width
angegebene Wert kleiner ist als der ...max-width
Wert jedoch größer als die anfängliche Ansichtsfensterbreite ist, ist der minimale Wert die anfängliche Ansichtsfensterbreite und der maximale Wert der Well-max-width
Wert. Das istextend-to-zoom
semantisch sinnvoll, da dasextend-to-zoom
on denmin-width
Wert buchstäblich auf die Breite des Ansichtsfensters erweitert, wenn der Zoom aktiviert ist1.0
. Und dies stimmt mit der obigen Antwortextend-to-zoom
überein, die denwidth
Wert bei gegebener Zoomstufe ändert / erweitert / verlängert .initial-scale
Attribut zu steuern , sondern es ist eine der Möglichkeiten, einen wahrgenommenen Unterschied zu erzeugen. Nach der Überarbeitung meines ersten Kommentars kann der UA-Stil das Ansichtsfenster auch vergrößern (nicht nur verkleinern), wenn die Gerätebreite größer als 360 Pixel ist.