Nebenwirkungen beim Entfernen von "width = device-width" aus dem Meta-Tag des Ansichtsfensters, wenn auch "initial-scale = 1.0" festgelegt ist

Obwohl das <meta name="viewport">Tag nicht standardisiert ist, wird es "von den meisten mobilen Browsern aufgrund der De-facto-Dominanz respektiert".

Ein Nachteil davon, dass es sich nicht um einen echten Webstandard handelt, ist, dass eine detaillierte Dokumentation nicht so verfügbar ist wie andere Standards. Die CSS-Arbeitsgruppe hat eine Spezifikation dafür, daher verwende ich diese hauptsächlich als maßgebliche Arbeit.

Meine Hauptfrage ist:

Was wäre der wahrgenommene Unterschied zwischen den folgenden Erklärungen?

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

<meta name="viewport" content="initial-scale=1.0">

Alternativ gefragt, was sind die Unterschiede zwischen diesen beiden @ viewport CSS-Regeln:

/* Translated from <meta name="viewport" content="width=device-width, initial-scale=1.0"> */
@viewport {
    zoom: 1.0;
    min-width: extend-to-zoom;
    max-width: 100vw;
}

/* Translated from <meta name="viewport" content="initial-scale=1.0"> */
@viewport {
    zoom: 1.0;
    min-width: extend-to-zoom;
    max-width: extend-to-zoom;
}

Wie ich zu diesen @viewportÜbersetzungen kam:

width=device-width zu min-width: extend-to-zoom; max-width: 100vw;

Das Dokument Level 1 des CSS Device Adaptation Module enthält Folgendes :

Die Eigenschaften widthund heightAnsichtsfenster <META>werden in widthund heightDeskriptoren übersetzt, wobei der Wert min-width/ und der Wert / auf die Länge des Ansichtsfensters festgelegt werden.min-heightextend-to-zoommax-widthmax-height

Sie geben zusätzlich ein Beispiel :

Dieses <META>Element:

<meta name="viewport" content="width=500, height=600">

übersetzt ins:

@viewport {
    width: extend-to-zoom 500px;
    height: extend-to-zoom 600px;
}

Der widthKurzbeschreibungsdeskriptor wird beschrieben als:

Dies ist eine Kurzbeschreibung zum Festlegen von min-widthund max-width. Ein <viewport-length>Wert setzt beide min-widthund max-widthdiesen Wert. Zwei <viewport-length>Werte werden min-widthauf den ersten und max-widthden zweiten Wert gesetzt .

Es liegt also nahe, dass dies width: extend-to-zoom 500px;gleichbedeutend ist mit min-width: extend-to-zoom; max-width: 500px;.

Das lässt nur den 100vwTeil. In Abschnitt 10.4 erklären sie:

device-widthund device-heightin 100vw bzw. 100vh übersetzen

So können wir endlich sehen, wie width=device-widthübersetzt wird min-width: extend-to-zoom; max-width: 100vw;.

initial-scale=1.0 zu zoom: 1.0; width: extend-to-zoom;

Dies ist ein wörtliches Beispiel :

Dieses <META>Element:

<meta name="viewport" content="initial-scale=1.0">

übersetzt ins:

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

Die andere Frage, die ich hier habe, ist, was genau ist der extend-to-zoomWert?

Die Dokumentation und das Lösungsverfahren sind schwer zu verstehen. Wenn mich jemand auf einige weitere Beispiele hinweisen kann, wäre das sehr dankbar.

Zusätzlich zu allem oben habe ich eine kurze Website zusammengestellt - https://romellem.github.io/temp-site/viewport/ -, um einige Ansichtsfensterkonfigurationen zu testen.

Nämlich:

• Inhalt = "Breite = Gerätebreite, Anfangsskala = 1,0"
• content = "initial-scale = 1.0"

Dies kann beim Testen hilfreich sein.

Bevor wir uns mit Ihren Fragen befassen, wollen wir uns kurz ansehen, warum das viewportMeta-Tag überhaupt existiert. Folgendes habe ich gesammelt.

Warum brauchen wir das viewportTag?

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 640pxeinen Anfangsblock enthalten 980px. In diesem Fall wird der anfängliche enthaltende Block verkleinert, 640pxdamit er in den mobilen Bildschirm passt. Diese 640pxBreite (Bildschirmbreite) wird als initial-widthAnsichtsfenster bezeichnet, das für unsere Diskussion relevant sein wird.

Also ... Warum brauchen wir diesen viewportTag? 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 viewportTags 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 viewportTag auch die Höhe des tatsächlichen Ansichtsfensters ändern kann, nicht nur die Breite

viewport Stichworte width

Das widthin einem viewportTag wird max-widthin der @viewportRegel übersetzt. Wenn Sie das widthas deklarieren device-width, wird es 100%in der @viewportRegel übersetzt. Der Prozentwert wird basierend auf initial-widthdem Ansichtsfenster aufgelöst. Wenn wir also immer noch das obige Beispiel verwenden, max-widthwird das in einen Wert von aufgelöst 640px. Wie Sie herausgefunden haben, gibt dies nur die an max-width. Das min-widthwird 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-zoomWert des UA-Stylesheets ist 5.0und initial-widthist 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 5xder 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) 10pxdenn dafür müsste man 32x zoomen!). Dieser Wert wird vom Algorithmus verwendet, um zu bestimmen, wie die min-widthund 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 widthAttribut) tun . (Wir gehen davon aus, dass das initial-widthdes Ansichtsfensters ist 640px.)

• widthIst das nicht ergibt gesetzt, max-widthund min-widthist extend-to-zoomin der @viewportRegel.
• initial-scaleist 1.0. Dies bedeutet, dass der zoomWert auch ist1.0
• Lassen Sie uns lösenextend-to-zoom . Schritte:
  1. extend-zoom = MIN(zoom, max-zoom). Die MINOperation wird in den Wert aufgelöst, der nicht ist auto. Hier zoomist 1.0und max-zoomist auto. Das heißt das extend-zoomist1.0
  2. extend-width = initial-width / extend-zoom. Das ist einfach; Teilen Sie 640 durch 1. Sie erhalten extend-widthist gleich640
  3. Da dies extend-zoomnicht der Fall ist, springen autowir zur zweiten Bedingung. max-widthist in der Tat extend-to-zoom, das bedeutet, dass eingestellt max-widthwird extend-width. Somit,max-width = 640
  4. min-widthauch ist extend-to-zoom, bedeutet dies , Einstellung min-widthzu max-width. Wir bekommenmin-width = 640
• Nach dem Auflösen der Nicht-auto (dh der extend-to-zoom) Werte für max-widthund min-width. Wir können mit dem nächsten Verfahren fortfahren . Da min-widthoder max-widthnicht ist auto, werden wir die erste Verwendung ifin dem Verfahren, so dass die ursprüngliche tatsächliche Darstellungseinstellung widthan MAX(min-width, MIN(max-width, initial-width)), das entspricht MAX(640, MIN(640, 640)). Dies wird 640für Ihr erstes tatsächliches Ansichtsfenster aufgelöstwidth
• Fahren Sie mit dem nächsten Verfahren fort . In diesem Schritt widthist nicht auto. Der Wert wird nicht geändert und wir erhalten das tatsächliche Ansichtsfenster widthvon640px

Lassen Sie uns das erstere tun.

• widthgesetzt ist, führt dies in max-widthsein 100%( 640pxin unserem Fall) und min-widthsind extend-to-zoomin der @viewportRegel.
• initial-scaleist 1.0. Dies bedeutet, dass der zoomWert auch ist1.0
• Lassen Sie uns lösenextend-to-zoom . Wenn Sie die Schritte sorgfältig befolgen (fast wie oben), erhalten Sie ein max-widthvon 640pxund ein min-widthvon 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.