Die Grundprinzipien und die detaillierte Verwendung des Ansichtsfensters

1. Übersicht über das Ansichtsfenster

Mobile Browser rendern Seiten normalerweise in einem virtuellen Fenster, das breiter als der Bildschirm ist. Dieses virtuelle Fenster ist das Ansichtsfenster. Der Zweck dieses virtuellen Fensters besteht darin, Webseiten, die nicht für mobile Geräte angepasst sind, richtig anzuzeigen, damit sie den Benutzern vollständig angezeigt werden können. Wenn wir mit einem Mobilgerät auf die Desktop-Version einer Webseite zugreifen, sehen wir manchmal eine horizontale Bildlaufleiste. Die Breite des hier anzeigbaren Bereichs entspricht der Breite des Ansichtsfensters.

Für den normalen Gebrauch kann die Seite mit dem folgenden Code skaliert werden

<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1" />

Wenn Sie nicht möchten, dass die Seite gezoomt wird, verwenden Sie den folgenden Code

<meta name="viewport" content="Breite=Gerätebreite, Anfangsmaßstab=1,0, Mindestmaßstab=1,0, Höchstmaßstab=1,0, benutzerdefiniert skalierbar=nein">

2. Der Unterschied zwischen Pixeln in CSS und Gerätepixeln

Beim Entwickeln von Desktop-Webseiten entspricht 1px in CSS 1px auf dem Gerät. Allerdings ist 1px in CSS nur ein abstrakter Wert und stellt nicht die tatsächliche Anzahl von Pixeln dar. Auf Mobilgeräten ist die Pixeldichte verschiedener Geräte unterschiedlich und 1px in CSS entspricht möglicherweise nicht dem Pixelwert eines realen Geräts. Durch das Zoomen durch den Benutzer wird auch geändert, wie viele Gerätepixel 1px im CSS darstellt. Dieses Verhältnis ist devicePixelRatio

Physisches Pixel / unabhängiges Pixel = Gerätepixelverhältnis
Wir können im Browser zoomen und window.devicePixelRatio in der Konsole drucken, um die Größe von devicePixelRatio anzuzeigen. Die unabhängigen Pixel können hier in CSS als px verstanden werden.

3. Grundlagen des Ansichtsfensters

Code:

<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1, Maximalmaßstab=1">

Nachfolgend sind einige Eigenschaften des Ansichtsfensters aufgeführt. Diese Eigenschaften können kombiniert verwendet werden. Mehrere Eigenschaften sollten durch Kommas getrennt werden. Hier entwickeln wir ein Konzept namens „ideales Ansichtsfenster“, das sich auf das Ansichtsfenster unter idealen Bedingungen bezieht. Benutzer können den gesamten Inhalt der Webseite normal anzeigen, ohne zu zoomen oder horizontal zu scrollen, und können den gesamten Text klar erkennen, unabhängig davon, wie klein der Text in CSS definiert ist.

4. Erweitertes Ansichtsfenster

1.Breite und Anfangsmaßstab
Wenn Breite und Anfangsmaßstab festgelegt sind, wählt der Browser automatisch den größten Wert zur Anpassung aus. Wenn Sie Folgendes festlegen:

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

Der Browser wählt den größeren Wert für die Anpassung. Wenn die ideale Ansichtsfensterbreite des aktuellen Fensters 300 beträgt und der Anfangsmaßstabswert 1 ist, ist der Breitenwert 400; wenn die ideale Ansichtsfensterbreite des aktuellen Fensters 480 beträgt, wird 480 verwendet.

Tatsächlich stellen width=device-width und initial-scale=1 beide den idealen Ansichtsbereich für die Anwendung dar. Auf Mobilgeräten wie iPad, iPhone und IE wird jedoch standardmäßig die Breite des vertikalen Bildschirms verwendet, unabhängig davon, ob der Bildschirm horizontal oder vertikal ist. Die kompatibelste Schreibweise ist

<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1">

2. Eigenschaften dynamisch ändern

ein. dokument.schreiben()

document.write('<meta name="viewport" content="width=device-width,initial-scale=1">')

b.setAttribute

var mvp = document.getElementById('testViewport');
mvp.setAttribute('Inhalt','Breite=480');

Viewport-Konzept

Mobile Browser rendern Seiten normalerweise in einem virtuellen Fenster, das breiter als der Bildschirm ist. Dieses virtuelle Fenster ist das Ansichtsfenster. Der Zweck dieses virtuellen Fensters besteht darin, Webseiten, die nicht für mobile Geräte angepasst sind, richtig anzuzeigen, damit sie den Benutzern vollständig angezeigt werden können. Wenn wir mit einem Mobilgerät auf die Desktop-Version einer Webseite zugreifen, sehen wir manchmal eine horizontale Bildlaufleiste. Die Breite des hier anzeigbaren Bereichs entspricht der Breite des Ansichtsfensters.

Der Unterschied zwischen Pixeln und Gerätepixeln in CSS

Beim Entwickeln von Desktop-Webseiten entspricht 1px in CSS 1px auf dem Gerät. Allerdings ist 1px in CSS nur ein abstrakter Wert und stellt nicht die tatsächliche Anzahl von Pixeln dar. Auf Mobilgeräten ist die Pixeldichte verschiedener Geräte unterschiedlich und 1px in CSS entspricht möglicherweise nicht dem Pixelwert eines realen Geräts. Durch das Zoomen durch den Benutzer wird auch geändert, wie viele Gerätepixel 1px im CSS darstellt. Dieses Verhältnis ist devicePixelRatio

Physisches Pixel / unabhängiges Pixel = Gerätepixelverhältnis

Wir können im Browser zoomen und window.devicePixelRatio in der Konsole drucken, um die Größe von devicePixelRatio anzuzeigen. Die unabhängigen Pixel können hier in CSS als px verstanden werden.

Grundlagen zu Ansichtsfenstern <br /> Eine typische für Mobilgeräte optimierte Site enthält etwa Folgendes:

<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1, Maximalmaßstab=1">

Nachfolgend sind einige Eigenschaften des Ansichtsfensters aufgeführt. Diese Eigenschaften können kombiniert verwendet werden. Mehrere Eigenschaften sollten durch Kommas getrennt werden. Hier entwickeln wir ein Konzept namens „ideales Ansichtsfenster“, das sich auf das Ansichtsfenster unter idealen Bedingungen bezieht. Benutzer können den gesamten Inhalt der Webseite normal anzeigen, ohne zu zoomen oder horizontal zu scrollen, und können den gesamten Text klar erkennen, unabhängig davon, wie klein der Text in CSS definiert ist.

Erweitertes Ansichtsfenster

1.Breite und Anfangsmaßstab
Wenn Breite und Anfangsmaßstab festgelegt sind, wählt der Browser automatisch den größten Wert zur Anpassung aus. Wenn Sie Folgendes festlegen:

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

Der Browser wählt den größeren Wert für die Anpassung. Wenn die ideale Ansichtsfensterbreite des aktuellen Fensters 300 beträgt und der Anfangsmaßstabswert 1 ist, ist der Breitenwert 400; wenn die ideale Ansichtsfensterbreite des aktuellen Fensters 480 beträgt, wird 480 verwendet.

Tatsächlich stellen width=device-width und initial-scale=1 beide den idealen Ansichtsbereich für die Anwendung dar. Auf Mobilgeräten wie iPad, iPhone und IE wird jedoch standardmäßig die Breite des vertikalen Bildschirms verwendet, unabhängig davon, ob der Bildschirm horizontal oder vertikal ist. Die kompatibelste Schreibweise ist

<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1">

2. Eigenschaften dynamisch ändern

ein. dokument.schreiben()

document.write('<meta name="viewport" content="width=device-width,initial-scale=1">')

b.setAttribute

var mvp = document.getElementById('testViewport');
mvp.setAttribute('Inhalt','Breite=480');

Damit ist dieser Artikel zu Ende. Sie können entsprechend Ihren Anforderungen wählen. Im Allgemeinen können PCs und mobile Geräte ohne Anpassung solche verwenden, die keine Skalierung unterstützen. Wenn Sie auf das mobile Endgerät wechseln und skalieren können, hat dies keine Auswirkungen.