Zusammenfassung des HTML5-Ansichtsfensters

In diesem Artikel geht es um das Ansichtsfenster in HTML5 Für Studierende, die mit dem Ansichtsfenster in HTML5 nicht vertraut sind, können wir uns diesen Artikel gemeinsam ansehen! Werfen wir einen detaillierten Blick auf das Ansichtsfenster in HTML5

Zusammenfassend geht es nur um drei Fragen:
1. Warum ein virtuelles Fenster einrichten?
Zunächst geht es um die Auflösung des virtuellen Fensters nahe an dem des PCs. Auf diese Weise kann das virtuelle Fenster den Seiteninhalt immer noch vollständig anzeigen, aber der Seiteninhalt ist relativ klein und Sie müssen manuell zoomen, um die Seite klar zu sehen.
2. Welchen Nutzen hat das Hinzufügen eines Ansichtsfensters?
Das Hinzufügen eines Ansichtsfensters soll die Optimierung des mobilen Endgeräts erleichtern. Stellen Sie die Breite des virtuellen Fensters auf „device-width“ ein, was den physischen Pixeln des Geräts entspricht, damit wir den Anzeigemodus der mobilen Seitenschnittstelle über Medien steuern können.
3. Die Beziehung zwischen der Bildschirmbreite des Geräts (d. h. den physischen Pixeln des Geräts) und der Auflösung
Am Beispiel des iPhone 6 beträgt die tatsächliche Bildschirmgröße 375*667, aber die Auflösung erreicht 750* 1334. Die beiden sind unterschiedliche Konzepte.
Die physische Größe bezieht sich auf die tatsächliche Größe des Bildschirms. Ein großer Bildschirm muss auch mit einer hohen Auflösung ausgestattet sein, d. h. wie viele Pixel können bei dieser Größe dargestellt werden. Je mehr Pixel angezeigt werden, desto größer ist der Ausdrucksspielraum. Die Bildschirme der beiden Mobiltelefone sind ungefähr gleich groß, auf dem einen können jedoch nur zwei Zeilen chinesischer Schriftzeichen angezeigt werden, während auf dem anderen fünf Zeilen chinesischer Schriftzeichen angezeigt werden können. Unabhängig vom Unterschied in der Schriftgröße ist die Auflösung entscheidend Letzterer hat eine größere Auflösung, so dass natürlich mehr Zeilen chinesischer Schriftzeichen angezeigt werden können. Mobiltelefone mit Farbbildschirm sind zwar gut, aber ohne eine ausreichend große Bildschirmauflösung ist die Farbqualität egal, was nützt es.

---

Lassen Sie uns die Rolle des Ansichtsfensters und seine Kombination mit Medien erklären.
Ein 50 Pixel breites p mag bei der Anzeige in einem PC-Browser genau richtig sein, bei der Anzeige in einem mobilen Browser erscheint es jedoch zu groß. Wie kann dieses Problem gelöst werden? Apple hat einen Weg gefunden: Es hat das Viewport-Meta-Tag in der mobilen Version (iOS) von Safari definiert. Seine Funktion besteht darin, ein virtuelles Fenster (Viewport) zu erstellen, und die Auflösung dieses virtuellen Fensters ähnelt der des Desktop-Monitors positioniert ist es 980px. Das heißt, wenn ich eine beliebige Seite im Browser öffne, beträgt die Breite dieser Seite 980 Pixel, nicht die physische Breite des Bildschirms.
Nehmen Sie als Beispiel Safari unter dem iPhone 6:
Auf dem 375 Pixel großen physischen Bildschirm des iPhone 6 – dem visuellen Ansichtsfenster – wird ein 980 Pixel großes virtuelles Fenster – das Layout-Ansichtsfenster (Layout-Ansichtsfenster) erstellt Ansichtsfenster) können wir die horizontalen und vertikalen Schieberegler ziehen oder die Webseite vergrößern und verkleinern, um den besten Browsing-Effekt zu erzielen (ähnlich einem Desktop-Browser), und das Layout-Ansichtsfenster wird zum Rendern des Layouts in Verbindung mit CSS verwendet. Wenn wir beispielsweise festlegen, dass die Breite eines Containers 100 % beträgt, beträgt der tatsächliche Wert des Containers 980 Pixel statt 375 Pixel. Auf diese Weise können die meisten Webseiten ganz normal in gezoomter Form auf dem Handy-Bildschirm angezeigt werden.

Wie groß ist das virtuelle Fenster tatsächlich 980px auf dem Bildschirm? Die physischen Pixel des iPhone 6-Bildschirms betragen 375 Pixel und die Breite des virtuellen Fensters beträgt 980 Pixel Die Größe des tatsächlichen Fensters, also des visuellen Fensters, wird verwendet, um die Größe des virtuellen Fensters zu beschreiben, was nichts damit zu tun hat. (Sie können chromn verwenden, um die Breite der Seite in PC-Browsern und mobilen Browsern zu überprüfen.)

• Die standardmäßige virtuelle Fenstergröße des Safari-Browsers, Opera-Browsers und Chromn-Browsers beträgt 980 Pixel.

  Firefox-Browser aktiviert standardmäßig den mobilen Modus und seine virtuelle Fensterbreite entspricht der Gerätebreite.

  Nachdem das virtuelle Fenster auf dem Smartphone erstellt wurde, trat ein weiteres Problem auf. Nachdem die PC-Webseite im mobilen Browser geöffnet wurde, erschienen sowohl die Schriftart als auch

  andere Elemente relativ klein, was dazu führte, dass die Seite relativ klein war Die manuelle Skalierung sieht schwieriger aus. Apple hat auch ein Ansichtsfenster erstellt, um die Größe des virtuellen Fensters anzupassen. Im Allgemeinen schreiben wir

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

Gerätebreite bedeutet, dass die Größe des virtuellen Fensters gleich eingestellt wird die physische Pixelbreite des Geräts. Dies erleichtert es uns, mithilfe von Medien eine speziell an das mobile Endgerät angepasste Seite zu schreiben, sodass wir auf dem mobilen Endgerät eine Seite in der entsprechenden Größe sehen können.

Das obige ist der detaillierte Inhalt vonZusammenfassung des HTML5-Ansichtsfensters. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!