Ausführliche Erläuterung der Lösung des Skalierungsproblems der mobilen HTML5-Seite

Normalerweise stellen wir beim Schreiben einer HTML5-Mobilseite fest, dass der Anteil der auf der Seite angezeigten Elemente falsch ist. Dann müssen wir zu diesem Zeitpunkt Folgendes hinzufügen:

<meta name="viewport" content="width=device-width,initial-scale=1">

oder Es ist

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />

Dann erklären wir diesen Satz:

Ansichtsfenster: stellt das Anzeigefenster dar;

width=device-width,initial-scale =1.0: Zeigt an, dass die Breite des Anzeigefensters der Bildschirmbreite des Geräts entspricht, Anfangsskalierung = 1,0, d. h. das anfängliche Skalierungsverhältnis beträgt 1,0 Skalierung

Maximum: Gibt das maximal zulässige Skalierungsverhältnis an

Benutzerskalierbar: Gibt an, ob der Benutzer die Seite zoomen darf.

Beispielfrage Situation:

Phänomen:

Wenn der Benutzer auf das Eingabefeld klickt, um Text auf der mobilen Seite zu bearbeiten, wird die Seite automatisch geöffnet Vergrößert

Lösung:

Fügen Sie

in den head

>-Tag ein, sonst ist dies nicht der Fall erlaubt Benutzerzoomseite benutzerskalierbar=nein

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />

Zusammenfassung

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Lösung des Skalierungsproblems der mobilen HTML5-Seite. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!