Einführung in die Parameter von Viewport in HTML5 und deren Verwendung

Das Internet entwickelt sich immer schneller und verschiedene Technologien entstehen nacheinander. Die Bildschirmgrößen und Auflösungen verschiedener Geräte sind unterschiedlich. Dies ist auch ein Problem, mit dem unser Front-End-Personal derzeit zu kämpfen hat: wie man sich entwickelt Einmal und seien Sie auf verschiedenen Schnittstellen freundlich. Zeigen Sie es!

Glücklicherweise erschien Viewport in HTML5! Das Aufkommen von Viewport ermöglicht die einheitliche und benutzerfreundliche Anzeige der von uns entwickelten Anwendungen oder Seiten auf Geräten unterschiedlicher Größe!

Einführung in die Viewport-Syntax:

<!– 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]
”
/>

Parametererklärung:

width – Steuert die Größe des Ansichtsfensters. Sie können beispielsweise einen Wert oder einen speziellen Wert angeben. Die Gerätebreite ist beispielsweise die Breite des Geräts (die Einheit ist CSS-Pixel bei der Skalierung auf 100 %).

height – Geben Sie entsprechend der Breite 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.

Mittel-dpi: Verwenden Sie mdpi als Ziel-dpi. Geräte mit hoher Pixeldichte werden entsprechend hochskaliert und Geräte mit Pixeldichte entsprechend verkleinert. Dies ist die Standardzieldichte.

Niedrig-dpi: 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.

<!– html document –>
 <meta name=”viewport” content=”target-densitydpi=device-dpi” />
 <meta name=”viewport” content=”target-densitydpi=high-dpi” />
 <meta name=”viewport” content=”target-densitydpi=medium-dpi” />
 <meta name=”viewport” content=”target-densitydpi=low-dpi” />
 <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 Zieldichte-DPI des Ansichtsfensters auf Geräte-DPI festlegen. 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.

initial-scale – anfängliche Skalierung. 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.

maximum-scale – 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 – Vom Benutzer anpassbare 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: 1. Stellen Sie die Bildschirmbreite auf die Gerätebreite ein und verbieten Sie dem Benutzer, den Zoom manuell anzupassen

<meta name=”viewport” content=”width=device-width,user-scalable=no” />

Beispiel: 2. Stellen Sie die Bildschirmdichte auf hohe Frequenz, mittlere Frequenz ein und niedrige Frequenz und verhindern, dass der Benutzer den Zoom manuell anpasst

<meta name=”viewport” content=”width=device-width,target-densitydpi=high-dpi,initial-scale=1.0

【Verwandte Empfehlungen】

Besondere Empfehlung

: „PHP-Programmiertools“ Laden Sie die V0.1-Version von „Box“ herunter 2. Beispielcode zu Problemen mit der Darstellungsfensterkompatibilität

3 . Viewport-Spezialthema: Vertiefendes Verständnis von CSS Responsive Web Design – Viewport

4 Teilen Sie das Viewport-Attribut, um das Problem zu lösen, dass die Schriftart beim Wechsel von der Vertikalen zurückgesetzt wird Bildschirm auf horizontalen Bildschirm auf dem mobilen Endgerät umwandeln

Das obige ist der detaillierte Inhalt vonEinführung in die Parameter von Viewport in HTML5 und deren Verwendung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!