Verwendung von Ansichtsfenstern in der HTML5-Entwicklung_HTML5-Tutorial-Fähigkeiten

Mit der Beliebtheit von High-End-Mobiltelefonen (Andriod, Iphone, Ipod, WinPhone usw.) hat die Entwicklung mobiler Internetanwendungen immer mehr Aufmerksamkeit auf sich gezogen. 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 Ansichtsfenster-Syntax:

Code kopieren Der Code lautet wie folgt: > initial-scale = float_value, Minimum-scale = float_value, user-scalable = [yes | no], target-densitydpi = [dpi_value |. dpi |. hoch -dpi |. niedrig-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 bei der Skalierung auf 100 %).

Höhe entspricht der Breite und gibt die Höhe an. target-densitydpi Die 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“ Geräte-DPI – Verwenden Sie die native DPI des Geräts als Ziel-DPI. 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 Standardzieldichte. Niedrige Auflösung – Verwenden Sie mdpi als Zielauflösung. Geräte mit mittlerer und hoher Pixeldichte werden entsprechend skaliert.

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

Code kopieren

Der Code lautet wie folgt:

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.

Anfangsskalierung Anfangsskalierung. 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 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)

(Stellen Sie die Bildschirmdichte auf hohe Frequenz, mittlere Frequenz und niedrige Frequenz ein, um automatisch zu skalieren, und verhindern Sie, dass Benutzer die Skalierung manuell anpassen)

PHP8, ich komme auch

Lernen Sie das Website-Layout in 30 Minuten

Shangguan Oracle Video-Tutorial für Anfänger bis Fortgeschrittene

Ihre erste Zeile UNI-APP-Code

Flattern Sie von Grund auf bis zum App-Start

Brother Lian Neues Linux-Video-Tutorial

AXURE 9 Video-Tutorial (geeignet für die interaktive Produktdesign-Benutzeroberfläche von Product Manager)

Zero Basic Proficiency PS-Video-Tutorial

16-tägiges UI-Video-Tutorial für den Einstieg

PS-Techniken und Slicing-Techniken-Video-Tutorial

Video-Tutorial zum Bau und zur Projekteinführung der Alibaba Cloud-Umgebung

Überblick über Computernetzwerke – Grundkenntnisse, die Programmierer beherrschen müssen

Grundlegendes Tutorial für Programmierer – Erklärung des HTTP-Protokolls

Websocket-Video-Tutorial

Verwendung von Ansichtsfenstern in der HTML5-Entwicklung_HTML5-Tutorial-Fähigkeiten