Diskussion am Beispiel des Bildschirmanpassungsproblems von HTML5 auf mobilen Endgeräten_HTML5-Tutorial-Fähigkeiten

Früher war HTML5 die heißeste Technologie, und das mobile Endgerät ist durch die Hinzufügung der HTML5-Technologie flexibler geworden. Jeder mag „Einmal schreiben, mehr ausführen“, aber seit Zuckerberg dieses Jahr zugegeben hat, dass er in HTML5 einen Fehler gemacht hat, sollten wir das tun Seien Sie sich auch darüber im Klaren, dass HTML5 als aufstrebende Technologie immer noch viele Mängel aufweist, z. B. die Effizienz von HTML5, die ausreicht, um viele Programmierer nicht beschweren zu können, und auch die Verbraucher werden unerträglich sein. Aber es ist unbestreitbar, dass HTML5 uns eine gute Web-Technologie gebracht hat. Dies ist der Trend der zukünftigen Entwicklung und nicht das Ende. Wir können härter daran arbeiten, besseren und effizienteren Code zu schreiben.

Okay, nachdem wir so viel Unsinn geredet haben, kommen wir jetzt zum Thema. Das Anpassungsproblem von Android ist das größte Problem für Android-Programmierer. Dafür überqueren alle das Meer und zeigen ihre magischen Kräfte Hier in HTML5 können wir dieses Problem besser lösen. Der mobile Browser platziert die Seite in einem virtuellen „Fenster“ (Ansichtsfenster). Normalerweise ist dieses virtuelle „Fenster“ (Ansichtsfenster) breiter als der Bildschirm, sodass nicht jede Webseite in ein kleines Fenster gequetscht werden muss (dies führt zu Unterbrechungen). das Layout von Webseiten, die nicht für mobile Browser optimiert sind), können Benutzer schwenken und zoomen, um verschiedene Teile der Webseite anzuzeigen. Häufig verwendete Ansichtsfenster-Layouts sind:

Die spezifische Bedeutung ist:
width: Steueransichtsfenster Die Größe kann durch einen Wert wie 600 oder einen speziellen Wert wie Gerätebreite angegeben werden, bei dem es sich um die Breite des Geräts handelt (Einheit sind CSS-Pixel bei Skalierung auf 100 %). Das standardmäßige virtuelle Fenster beträgt 980 Pixel breit (derzeit die größte Standardbreite einiger Websites) und skalieren Sie sie dann entsprechend einem bestimmten Verhältnis (3:1 oder 2:1).

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“

device-dpi – Verwenden Sie die ursprüngliche 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.

/>


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: Das anfängliche Skalierungsverhältnis, dh das Skalierungsverhältnis, wenn die Seite zum ersten Mal geladen wird.
maximaler Maßstab: Der maximale Maßstab, auf den der Benutzer zoomen darf, im Bereich von 0 bis 10,0.
Mindestmaßstab: Der Mindestmaßstab, auf den der Benutzer zoomen darf, im Bereich von 0 bis 10,0.
Benutzerskalierbar: Ob der Benutzer manuell zoomen kann, der Wert kann sein: ①Ja, true erlaubt Benutzern das Zoomen; ②nein, false erlaubt Benutzern nicht zu zoomen, wenn Sie es auf „Nein“ einstellen, dann minimaler Maßstab und maximaler Maßstab -scale wird ignoriert, da eine Skalierung überhaupt nicht möglich ist.

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

Legen Sie diese Attribute fest und fügen Sie sie in das Metaattribut von HTML5 ein, um sie an den Bildschirm des Mobiltelefons anzupassen, zum Beispiel:

Code kopieren

Der Code lautet wie folgt:

[mw_shl_code=xhtml,true]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 |. high-dpi |. medium-dpi]
/>[/mw_shl_code]

Das Folgende sind zwei Beispiele für die tatsächliche Verwendung :

(Stellt die Bildschirmbreite auf die Gerätebreite ein und verhindert, dass Benutzer den Zoom manuell anpassen)

Code kopieren Der Code lautet wie folgt:

>
(Die Dichte des Einstellungsbildschirms wird automatisch für hohe Frequenz, mittlere Frequenz und niedrige Frequenz skaliert, und Benutzern ist es untersagt, die Skalierung manuell anzupassen)

Kopieren Sie den Code

Der Code lautet wie folgt: