Detaillierte Erläuterung des Ansichtsfensters für HTML5-Mobilterminals

Jeder kennt das Problem des Ansichtsfensters auf mobilen Seiten. Es gibt viele Artikel zum Thema Ansichtsfenster. Ich empfehle jedem diese beiden Artikel, die sehr detailliert sind.

Dieser Artikel enthält einige Ergänzungen zum Ansichtsfenster

Mobiltelefonbildschirm

Der Mobiltelefonbildschirm ist ein Hardwareattribut und wir können es weder über JS noch über Meta-Tags beeinflussen .

• Die physischen Pixel des Mobiltelefonbildschirms werden von Mobiltelefonherstellern als Pixel, Auflösung, PPI usw. bezeichnet.

Die häufigsten für Android sind 720X1280, 1080X1920 usw.
Das iPhone ist iPhone5 640X1136, iPhone6 750X1334, iPhone6P 1080X1920

• Logik des Mobiltelefonbildschirms Pixel, die Anzahl der Pixel nach der physischen Pixelkonvertierung. Das heißt, die Größe des idealen Ansichtsfensters

Der iPhone5-Bildschirm ist ursprünglich 640 Pixel breit, wurde aber in 320 Pixel
konvertiert Die physischen Pixel des iPhone6 ​​sind 750 Pixel und werden in 375 Pixel
konvertiert. Das iPhone 6P ist etwas seltsam. Die physischen Pixel sind tatsächlich 1080 Pixel breit, aber die Systembelichtung beträgt tatsächlich 1242 Pixel und wird dann in 414px

Sie können die logischen Pixel des Bildschirms erhaltenscreen.width/height

Layout-Ansichtsfenster Layout-Ansichtsfenster

Die gerade erwähnten physischen Pixel und logischen Pixel des Bildschirms werden alle vom Mobiltelefonhersteller festgelegt, und wir können dies nicht tun. Die Einstellung konzentriert sich auf die folgenden beiden Ansichtsfenster, also verwechseln Sie sie nicht.

Layout-Ansichtsfenster entspricht der Breite des Browsers.

Wir können es über festlegen.
Standardmäßig ist das Layout-Ansichtsfenster im Allgemeinen 980 Pixel breit.

kann die Breite des Layout-Ansichtsfensters ermitteln. document.documentElement.clientWidth

Visuelles Ansichtsfenster

Das visuelle Ansichtsfenster kann als ein Fenster betrachtet werden, das so groß ist wie der Bildschirm eines Mobiltelefons, aber die Anzahl der Pixel, die es anzeigen kann, entspricht nicht so vielen logischen Pixeln auf dem Bildschirm .

Das visuelle Darstellungsfenster ist nicht leicht zu verstehen, obwohl die logischen Pixel des Mobiltelefonbildschirms festgelegt wurden. Beispielsweise beträgt das iPhone5 320 Pixel.

Der Bildschirm ist zwar 320 Pixel breit, kann aber 980 Pixel breite Inhalte anzeigen, sodass die Breite des visuellen Fensters 980 Pixel beträgt.

Bei vielen Webseiten, die nicht für Mobilgeräte geeignet sind, stellen wir beim Öffnen auf Mobiltelefonen fest, dass die Webseiten auf die Breite des Mobiltelefonbildschirms verkleinert werden.

Der entscheidende Punkt ist das Zoomen, wodurch auf dem 320-Pixel-Bildschirm mehr Inhalte angezeigt werden können.

kann die Breite des visuellen Ansichtsfensters ermitteln. window.innerWidth

Die Breite des visuellen Ansichtsfensters kann über festgelegt werden.

Die Breite des visuellen Ansichtsfensters beträgt
screen.width / initial-scaleGleichzeitig wirkt sich dies auch auf die Breite des Layout-Ansichtsfensters aus, da die Breite des Layout-Ansichtsfensters immer größer oder gleich der Breite des ist visuelle Gestaltung.

如果不设置 initial-scale ，iOS设备会自动将 visual viewport 缩放到 布局视口一样大。

Erinnern Sie sich, wie breit das Standard-Layout-Ansichtsfenster ist?

Die Beziehung zwischen logischen Bildschirmpixeln, Layout-Ansichtsfenster und visuellem Ansichtsfenster

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

Stellen Sie die Breite des Layout-Ansichtsfensters auf die Bildschirmbreite ein

<meta name="viewport" content="width=640">

Stellen Sie die Breite des Layout-Ansichtsfensters auf 640 Pixel ein (logische Pixel, nicht physische Pixel)

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

Stellen Sie das visuelle Ansichtsfenster auf das Zweifache der Bildschirmbreite ein (das richtige Verständnis lautet: 0,5-fache des visuellen Ansichtsfensters). die Bildschirmbreite, sodass die Breite des visuellen Ansichtsfensters doppelt so groß ist wie die Bildschirmbreite)

Zu diesem Zeitpunkt beträgt die Breite des Layout-Ansichtsfensters auch das Doppelte der Bildschirmbreite, statt der standardmäßigen 980 Pixel

Zusammenfassung:

1、默认情况下 layout viewport 为 980px
2、width=x 设置布局视口，initial-scale=y 设置视觉视口
3、如果只设置 布局视口 和 视觉视口 中的一个，那么另一个也是同样的宽度
4、布局视口 的宽度始终大于等于 视觉视口

Zum Beispiel iPhone 5 oben

<meta name="viewport" content="width=600,initial-scale=0.5">

Wie breit sind also das visuelle Ansichtsfenster bzw. das Layout-Ansichtsfenster?

Endlich sind wir endlich beim Vertrauten angekommen

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

Sie alle wissen, was das bedeutet, oder?

Layout-Ansichtsfenster des Browserfensters, auf die Bildschirmbreite eingestellt.
Der visuelle Ansichtsbereich wird auch auf die Breite des Bildschirms ohne Skalierung und auf die Anzahl der Pixel eingestellt, die so breit wie der Bildschirm angezeigt werden.
Dies ist das sogenannte perfekte Ansichtsfenster.

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des Ansichtsfensters für HTML5-Mobilterminals. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!