Eine kurze Diskussion über die spezifische Verwendung von Ansichtsfenstern in mobilen Endgeräten

Auf der PC-Seite bezieht sich das Ansichtsfenster auf den sichtbaren Bereich des Browsers und seine Breite entspricht der Breite des Browserfensters. Im CSS-Standarddokument wird der Ansichtsbereich auch als anfänglicher umschließender Block bezeichnet. Er ist die Grundlage aller prozentualen CSS-Breitenberechnungen und begrenzt die maximale Breite für das CSS-Layout.

Das mobile Terminal ist komplizierter und umfasst drei Ansichtsfenster: Layout-Ansichtsfenster, visuelles Ansichtsfenster und ideales Ansichtsfenster.

Dieser Artikel konzentriert sich auf Ansichtsfenster auf Mobilgeräten.

1. Grundlegende Konzepte

1.1 Zwei Arten von Pixeln

Ein Pixel ist der kleinste Bereich auf einem Computerbildschirm, der eine bestimmte Farbe darstellen kann. Je mehr Pixel ein Bildschirm hat, desto mehr Inhalt können Sie auf derselben Fläche sehen. Mit anderen Worten: Bei gleicher Gerätegröße ist das Bild umso feiner, je dichter die Pixel sind.

Was passiert also, wenn wir für ein Element in CSS die Eigenschaft width: 250px; festlegen? Wie viele Pixel breit ist dieses Element?

Tatsächlich sind hier zwei verschiedene Pixel beteiligt: ​​physische Pixel und CSS-Pixel.

Physische Pixel (Gerätepixel)

Bezieht sich auf die physischen Pixel des Gerätebildschirms. Die Anzahl der physischen Pixel eines Geräts ist festgelegt.

CSS-Pixel

Es ist ein abstraktes Konzept, das in CSS und JS verwendet wird. Das Verhältnis zwischen diesem und den physischen Pixeln hängt von den Eigenschaften des Bildschirms (ob er eine hohe Dichte hat) und dem vom Benutzer durchgeführten Zoom ab und wird vom Browser selbst konvertiert.

Beim Retina-Bildschirm von Apple werden jeweils 4 Pixel zusammengefasst, um das Bild innerhalb eines Pixelanzeigebereichs auf einem normalen Bildschirm darzustellen und so einen ausgefeilteren Anzeigeeffekt zu erzielen. An diesem Punkt erstreckt sich das 250-Pixel-Element über eine Breite von 500 physischen Pixeln.

Wenn der Benutzer hineinzoomt, erstreckt sich ein CSS-Pixel über mehr physische Pixel.

1.2 Drei Ansichtsfenster

Mobile Browser sind in der Regel 240px bis 640px breit, während die meisten für PCs konzipierten Websites mindestens 800px breit sind. Wenn das Browserfenster weiterhin als Ansichtsfenster verwendet wird, wird der Website-Inhalt auf dem Telefon sehr schmal dargestellt.

Daher werden die Konzepte Layout-Viewport, Visual Viewport und Ideal Viewport eingeführt, sodass der Viewport auf mobilen Endgeräten nicht mehr von der Browserbreite abhängig ist.

Layout-Ansichtsfenster

Im Allgemeinen setzen Browser auf Mobilgeräten standardmäßig ein Viewport-Meta-Tag, um ein virtuelles Layout-Ansichtsfenster zu definieren, das verwendet wird, um das Problem der frühen Seitenanzeige auf Mobiltelefonen zu lösen. iOS und Android stellen die Viewport-Auflösung grundsätzlich auf 980px ein, sodass Webseiten vom PC grundsätzlich auch auf dem Handy dargestellt werden können, die Elemente aber sehr klein wirken. Generell kann man Webseiten standardmäßig manuell skalieren.

Die Breite/Höhe des Layout-Ansichtsfensters kann über document.documentElement.clientWidth / Height ermittelt werden.

Wie Sie sehen, beträgt die Standardbreite des Layout-Ansichtsfensters 980 Pixel. Wenn Sie den Layout-Ansichtsbereich explizit festlegen möchten, können Sie das Meta-Tag in HTML verwenden:

<meta name="Ansichtsfenster" content="width=400"> 

Das Layout-Ansichtsfenster macht das Ansichtsfenster vollständig unabhängig von der Bildschirmbreite des mobilen Browsers. Das CSS-Layout wird darauf basierend berechnet und dadurch eingeschränkt.

Visuelles Ansichtsfenster

Das visuelle Ansichtsfenster ist der Bereich, den der Benutzer aktuell sieht. Der Benutzer kann das visuelle Ansichtsfenster durch Vergrößern und Verkleinern bedienen, ohne das Layout-Ansichtsfenster zu beeinträchtigen.

Die Beziehung zwischen dem visuellen Ansichtsfenster und dem Zoomverhältnis lautet:當前縮放值= 理想視口寬度/ 視覺視口寬度

Wenn der Benutzer also hineinzoomt, wird der visuelle Ansichtsbereich kleiner und die CSS-Pixel umfassen mehr physische Pixel.

Ideales Ansichtsfenster

Da die Standardbreite des Layout-Ansichtsfensters nicht ideal ist, führten Apple und andere Browserhersteller das Konzept eines idealen Ansichtsfensters ein, also die für das Gerät optimale Größe des Layout-Ansichtsfensters. Eine in einem idealen Viewport angezeigte Website hat eine optimale Breite, ohne dass der Benutzer zoomen muss.

Der Wert des idealen Ansichtsfensters ist tatsächlich der Wert der Bildschirmauflösung, und das entsprechende Pixel wird als geräteunabhängiges Pixel (Dip) bezeichnet. Ein Dip hat nichts mit den physischen Pixeln des Geräts zu tun. Ein Dip nimmt bei jeder Pixeldichte den gleichen Platz auf dem Gerätebildschirm ein. Wenn der Benutzer nicht zoomt, entspricht ein CSS-Pixel einem Dip.

Um das Layout-Ansichtsfenster an die Breite des idealen Ansichtsfensters anzupassen, kann die folgende Methode verwendet werden:

<meta name="viewport" content="width=Gerätebreite">

Tatsächlich ist dies die Grundlage des responsiven Layouts.

2. Ansichtsfenstereinstellungen

Wir können das Viewport-Meta-Tag verwenden, um das Layout-Ansichtsfenster festzulegen.

<meta name="Ansichtsfenster"
    Inhalt = "Breite = Gerätebreite, Anfangsmaßstab = 1,0, Maximalmaßstab = 1" >

Nachfolgend finden Sie eine detaillierte Beschreibung der einzelnen Eigenschaften:

Einige Punkte sind erwähnenswert:

• Das Viewport-Tag ist nur für mobile Browser gültig und für PC-Browser ungültig.
• Wenn das Zoomverhältnis 100 % beträgt, ist die Dip-Breite = CSS-Pixelbreite = ideale Ansichtsfensterbreite = Layout-Ansichtsfensterbreite
• Das alleinige Festlegen des Anfangsmaßstabs oder der Anfangsbreite führt zu Kompatibilitätsproblemen. Daher können Sie den Layout-Ansichtsbereich am besten auf den idealen Ansichtsbereich einstellen, indem Sie beide Eigenschaften gleichzeitig festlegen.
• Es ist möglich, die manuelle Skalierung im Android Chrome-Browser zu erzwingen, auch wenn user-scalable = no eingestellt ist

3. Einmal-Chart, Zweimal-Chart, Dreimal-Chart

Die Hardwarepixelgröße des Retina-Displays des MacBook Pro beträgt 2880 x 1800 Pixel. Wenn die Bildschirmauflösung auf 1920 x 1200 Pixel eingestellt ist, beträgt die ideale Ansichtsfensterbreite 1920 Pixel und somit auch die Dip-Breite 1920 Pixel. Das Verhältnis der idealen Ansichtsfensterbreite zum Gerätepixelverhältnis beträgt 1,5 (2880/1920). Dieses Verhältnis wird als Gerätepixelverhältnis bezeichnet:邏輯像素寬度* 設備像素比= 物理像素寬度

Das Gerätepixelverhältnis kann über window.devicePixelRatio oder mithilfe von device-pixel-ratio in CSS ermittelt werden.

Im Folgenden sind gängige Gerätepixelverhältnisse aufgeführt:

• Desktopanzeige mit normaler Dichte: devicePixelRatio = 1
• Desktop-Displays mit hoher Auflösung (Mac Retina): devicePixelRatio = 2
• Gängige Handy-Displays: devicePixelRatio = 2 or 3

Legen Sie für ein 100 x 100 Pixel großes Bild dessen Breite und Höhe über CSS fest:

{
    Breite: 100px;
    Höhe: 100px;
}

Normalerweise lässt es sich auf einem Computer mit einem normalen Display öffnen, aber wenn es auf einem Mobiltelefon oder einem Retina-Bildschirm geöffnet und entsprechend der logischen Auflösung (deren devicePixelRatio = 2 gerendert wird, entspricht dies der Verwendung von 4 physischen Pixeln zur Darstellung von 1 elektronischen Pixel. Dies entspricht der Verwendung einer 2-fachen Lupe zum Betrachten des Bildes. Das Bild wird unscharf.

Derzeit müssen Sie @2x- oder sogar @3x-Bilder verwenden, um Bildverzerrungen zu vermeiden.

Damit ist dieser Artikel über die spezifische Verwendung von Ansichtsfenstern auf Mobilgeräten abgeschlossen. Weitere relevante Inhalte zu Ansichtsfenstern auf Mobilgeräten finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!