Analyse von Ansichtsfenster -Tags und verwandten CSS -Nutzung in der mobilen Entwicklung von HTML5

In diesem Artikel wird hauptsächlich das Ansichtsfenster und die damit verbundene CSS -Nutzungsanalyse in der mobilen Entwicklung von HTML5 vorgestellt. Das Ansichtsfenster wird häufig als Ansichtsfenster oder Ansichtsfenster bezeichnet und spielt eine wichtige Rolle bei der Anpassung an mobilem Layout und Bildschirm. Freunde, die es brauchen, können sich darauf beziehen.

Das im mobile Front-End häufig erwähnte Ansichtsfenster (Ansichtsfenster) ist der Bildschirmbereich, in dem der Browser den Seiteninhalt anzeigt. Mehrere wichtige Konzepte sind die Beziehung zwischen DIP (Gerätsunabhängige Pixel-Geräte-Logikpixel) und CSS-Pixel. Hier verstehen wir zunächst die folgenden Konzepte.

Im Allgemeinen setzen Browser auf mobilen Geräten ein Ansichtsfenster -Meta -Tag standardmäßig und definieren ein virtuelles Layout -Ansichtsfenster, um das Problem der frühen Seitenanzeige auf Mobiltelefonen zu lösen. IOS und Android setzen die Auflösung dieses Ansichtsfensters im Grunde auf 980px, sodass die Webseiten auf dem PC im Grunde genommen telefonisch angezeigt werden können, aber die Elemente sehen sehr klein aus, und die Webseiten können im Allgemeinen standardmäßig manuell skaliert werden.

Das visuelle Ansichtsfenster (visuelles Ansichtsfenster) bietet den visuellen Bereich des physischen Bildschirms, die physikalischen Pixel der Bildschirmanzeige, die gleiche Größe des Bildschirms, das Gerät mit hoher Pixeldichte und die Hardware -Pixel sind mehr. Zum Beispiel die physischen Pixel des iPhone:

iPhone5: 640 * 1136

iPhone 6: 750 * 1334

iPhone6 ​​Plus: 1242 * 2208

Ideales Ansichtsfenster und DIP (Gerätelogikpixel)

Ideales Ansichtsfenster ist in der Regel das, was wir die Bildschirmauflösung nennen.

DIP (Geräte -Logikpixel) hat nichts mit dem Hardwarepixel des Geräts zu tun. Ein Dip nimmt den gleichen Speicherplatz auf einem Gerätebildschirm einer beliebigen Pixeldichte ein.

Beispielsweise sind die Hardware -Pixel der Retina -Bildschirmanzeige von MacBook Pro: 2880 * 1800. Wenn Sie die Bildschirmauflösung auf 1920 * 1200 festlegen, beträgt der Breitenwert des idealen Ansichtsfensters 1920 Pixel und der Breitenwert des DIPS 1920. Das Geräts -Pixel -Verhältnis beträgt 1,5 (2880/1920). Die Beziehung zwischen der logischen Pixelbreite und der physikalischen Pixelbreite (Pixelauflösung) des Geräts erfüllt die folgende Formel:

Die Auflösung des Mobiltelefonbildschirms ist normalerweise nicht zulässig. Es ist im Allgemeinen standardmäßig ein fester Wert, der vom Gerätehersteller festgelegt wurde. Mit anderen Worten, der Wert des Eintauchens ist der Wert des idealen Ansichtsfenfers (d. H. Auflösung). Zum Beispiel die Bildschirmauflösung des iPhone:

iPhone5: Auflösung 320*568, physische Pixel 640*1136, @2x

iPhone6: Auflösung 375*667, physische Pixel 750*1334, @2x

iPhone6 ​​Plus: Auflösung 414 * 736, Physikalische Pixel 1242 * 2208, @3x (Beachten Sie, dass das tatsächliche angezeigte Bildverhältnis auf 1080 × 1920 reduziert wird. Die spezifischen Gründe werden am Ende unseres Artikels eingeführt)

CSS -Pixel (PX) Einheiten, die für das Seitenlayout verwendet werden. Die Pixelgröße des Stils (z. B. Breite: 100px) ist in CSS -Pixeln angegeben. Das Verhältnis von CSS -Pixeln zum Eintauchen ist das Skalierungsverhältnis der Webseite. Wenn die Webseite nicht skaliert wird, entspricht ein CSS -Pixel einem DIP (Gerätebotschaftspixel).

Verwenden Sie das META -Tag des Ansichtsfensters, um das Layout zu steuern

Schauen wir uns zunächst die extremen Eigenschaften des Ansichtsfenster -Meta -Tags an: