Anpassung des Viewport-Bildschirms in der HTML5-Entwicklung

Mit der Beliebtheit von High-End-Mobiltelefonen (Andriod, Iphone, Ipod, WinPhone usw.) hat die Entwicklung mobiler Internetanwendungen immer mehr Aufmerksamkeit erregt. Die Verwendung von HTML5 zur Entwicklung mobiler Anwendungen ist die beste Wahl. Allerdings hat jedes Mobiltelefon eine andere Auflösung und Bildschirmgröße. Wie können wir die von uns entwickelte Anwendung oder Seitengröße für verschiedene High-End-Mobiltelefone anpassen? Das Erlernen der Verwendung des HTML5-Ansichtsfensters kann Ihnen dabei helfen ...

Einführung in die Syntax des Ansichtsfensters:

<!-- html document -->
   <meta name="viewport"
       content="
           height = [pixel_value | device-height] ,
           width = [pixel_value | device-width ] ,
           initial-scale = float_value ,
           minimum-scale = float_value ,
           maximum-scale = float_value ,
           user-scalable = [yes | no] ,
           target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi]
       "
   />

Breite

Steuern Sie die Größe des Ansichtsfensters. Sie können einen Wert oder einen speziellen Wert angeben. Beispielsweise ist die Gerätebreite die Breite des Geräts (die Einheit ist CSS-Pixel, wenn die Skalierung 100 % beträgt).

Höhe

entspricht der Breite und gibt die Höhe an.

target-densitydpi

Eine Bildschirmpixeldichte wird durch die Bildschirmauflösung bestimmt, normalerweise definiert als die Anzahl der Punkte pro Zoll (dpi). Android unterstützt drei Bildschirmpixeldichten: niedrige Pixeldichte, mittlere Pixeldichte und hohe Pixeldichte. Ein Bildschirm mit niedriger Pixeldichte hat weniger Pixel pro Zoll, während ein Bildschirm mit hoher Pixeldichte mehr Pixel pro Zoll hat. Die Standardbildschirme von Android Browser und WebView weisen eine mittlere Pixeldichte auf.

Das Folgende ist der Wertebereich des Attributs „target-densitydpi“

• device-dpi – Verwenden Sie die ursprüngliche dpi des Geräts als Ziel-dp. Eine Standardskalierung findet nicht statt.

• hohe Auflösung – Verwenden Sie HDPI als Ziel-DPI. Geräte mit mittlerer Pixeldichte und Geräte mit niedriger Pixeldichte werden entsprechend verkleinert.

• mittlere Auflösung – Verwenden Sie mdpi als Ziel-dpi. Geräte mit hoher Pixeldichte werden entsprechend hochskaliert und Geräte mit Pixeldichte entsprechend verkleinert. Dies ist die Standard-Zieldichte.

• niedrige Auflösung – Verwenden Sie mdpi als Ziel-DPI. Geräte mit mittlerer und hoher Pixeldichte werden entsprechend skaliert.

• 8487820b627113dd990f63dd2ef215f3 – Geben Sie einen bestimmten dpi-Wert als Ziel-dpi an. Dieser Wert muss im Bereich von 70–400 liegen.

1	<!-- html document -->
2	<meta name="viewport" content="target-densitydpi=device-dpi" />
3	<meta name="viewport" content="target-densitydpi=high-dpi" />
4	<meta name="viewport" content="target-densitydpi=medium-dpi" />
5	<meta name="viewport" content="target-densitydpi=low-dpi" />
6	<meta name="viewport" content="target-densitydpi=200" />

Um zu verhindern, dass Android Browser und WebView Ihre Seite basierend auf der Pixeldichte verschiedener Bildschirme skalieren, können Sie die Ansichtsfensterdichte (dpi) als Ziel festlegen ist auf Geräte-DPI eingestellt. Wenn Sie dies tun, wird die Seite nicht skaliert. Stattdessen wird die Seite basierend auf der Pixeldichte des aktuellen Bildschirms angezeigt. In diesem Fall müssen Sie auch die Breite des Ansichtsfensters so definieren, dass sie mit der Breite des Geräts übereinstimmt, damit Ihre Seite auf den Bildschirm passt.

Anfangsskala

Anfangsskala. Das ist die anfängliche Zoomstufe der Seite. Dies ist ein Gleitkommawert, der ein Multiplikator der Seitengröße ist. Wenn Sie beispielsweise die anfängliche Skalierung auf „1,0“ festlegen, wird die Webseite bei der Anzeige mit 1:1 der Zieldichteauflösung angezeigt. Wenn Sie den Wert auf „2,0“ einstellen, wird die Seite auf das Zweifache vergrößert.

maximale Skalierung

Maximale Skalierung. Das heißt, der maximal zulässige Skalierungsgrad. Dies ist ebenfalls ein Gleitkommawert, der den maximalen Multiplikator der Seitengröße im Vergleich zur Bildschirmgröße angibt. Wenn Sie diesen Wert beispielsweise auf „2,0“ setzen, kann die Seite im Vergleich zur Zielgröße bis zu 2-fach vergrößert werden.

Benutzerskalierbar

Benutzerskalierbare Skalierung. Das heißt, ob der Benutzer die Zoomstufe der Seite ändern kann. Wenn es auf „Ja“ gesetzt ist, darf der Benutzer es ändern, andernfalls ist es „Nein“. Der Standardwert ist ja. Wenn Sie es auf „Nein“ setzen, werden sowohl die minimale als auch die maximale Skalierung ignoriert, da eine Skalierung überhaupt nicht möglich ist.

Alle Skalierungswerte müssen im Bereich 0,01–10 liegen.

Beispiel:

(Stellen Sie die Bildschirmbreite auf die Gerätebreite ein und verbieten Sie dem Benutzer, den Zoom manuell anzupassen)

5ca81241dcf6315bc5b7ab8f758a3c7c

(Stellen Sie die Bildschirmdichte auf automatische Skalierung mit hoher Frequenz, mittlerer Frequenz und niedriger Frequenz ein und verbieten Sie dem Benutzer, die Skalierung manuell anzupassen)

834eb5131b21b935298138b19dbfa749

Das obige ist der detaillierte Inhalt vonAnpassung des Viewport-Bildschirms in der HTML5-Entwicklung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!