Teilen Sie das Viewport-Attribut, um das Problem zu lösen, dass die Schriftart beim Wechsel vom vertikalen zum horizontalen Bildschirm auf dem mobilen Endgerät zurückgesetzt wird.

In diesem Artikel wird das Viewport-Attribut verwendet, um das Problem zu lösen, dass die Schriftart zurückgesetzt wird, wenn auf dem mobilen Endgerät vom vertikalen zum horizontalen Bildschirm gewechselt wird. Als ich anfing, daran zu arbeiten, habe ich die Seite nie auf meinem Mobiltelefon getestet. Nachdem ich mehrere Seiten geschrieben hatte, stellte ich fest, dass die Seite extrem klein und fast unsichtbar war.

Der Grund dafür ist, dass jedes Mobilgerät seine eigene Standard-Ansichtsfensterbreite hat.

Ansichtsfenster: Es gibt zwei Ansichtsfenster in mobilen Browsern: sichtbares Ansichtsfenster (Bildschirmgröße des Geräts) und Browser-Ansichtsfenster (Webseitenbreite).

Nehmen Sie das iPhone 4S als Beispiel. Sein Bildschirm ist 320*480 groß, es kann jedoch Inhalte mit einer Breite von 980 Pixeln anzeigen (der Standardwert für iPhones ist 980), wenn Sie also eine Webseite auf dem Mobiltelefon platzieren Seite und zeigen Sie es an, es entspricht einer Schrumpfung um 980/320. Der Zweck dieser Vorgehensweise auf Mobiltelefonen besteht darin, mehr Dinge anzuzeigen. Das Ergebnis ist jedoch, dass die auf dem PC erstellten Seiten so klein sind wie Ameisen auf dem mobilen Endgerät!

Die mobile Version hat einen Meta-Tag: viewport Mit diesem Tag können Sie die Breite des Browser-Ansichtsfensters auf die gleiche Breite wie die sichtbare Ansichtsfensterbreite einstellen.

<meta name="viewport" content="width=device-width">

Für einige alte Browser für Mobilgeräte, die Viewport nicht unterstützen (naja, vielleicht, wie zum Beispiel BlackBerry), können Sie den folgenden Code verwenden

<meta name="HandheldFriendly" content="true">

Aber ich denke, das sollte so sein be now Nicht viele Leute verwenden dies, normalerweise schreiben Sie einfach die erste Zeile.

Apropos Ansichtsfenster, er hat tatsächlich einige andere Attribute:

initial-scale: anfängliches Skalierungsverhältnis

maximum-scale: Skalierung ist maximal zulässig Maßstab

minimum-scale: Der für die Skalierung zulässige Mindestmaßstab

Benutzerskalierbar: Ob manuelle Skalierung zulässig ist

Wofür werden diese Eigenschaften verwendet?

Wenn das Mobilgerät vom Hoch- ins Querformat wechselt, wird die Schriftart zurückgesetzt und wird sehr groß. Wie kann man das Problem lösen?

Sie müssen es nur so einstellen

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

Stellen Sie die Seite so ein. Das Standardzoomverhältnis ist 1 und der zulässige Zoom ist ebenfalls 1-1 entspricht dem Deaktivieren des Zooms. Der Browser folgt nur der im Stil definierten Schriftgröße.

Vielleicht sehen Sie diese Schreibweise.

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" >

Wenn Sie jedoch das Attribut user-scalable=no verwenden, werden Minimum-scale=1 und Maximum-scale=1 ignoriert, da Sie die Skalierung deaktiviert haben.

Ich habe an anderer Stelle einige spezifischere Erklärungen gefunden:

1) Garantiert user-scalable=no, dass die Seite nicht skaliert werden kann? NEIN, einige Browser mögen das nicht. Stellen Sie einfach das maximale und minimale Skalierungsverhältnis auf 1,0 ein.

2), initial-scale=1.0 Ist die anfängliche Skalierung durch den Benutzer skalierbar? Nicht unbedingt. Einige Browser interpretieren „Benutzerskalierbar“ als manuelle Skalierung durch den Benutzer. Wenn „Benutzerskalierbar“ = „Nein“, wird die anfängliche Skalierung nicht wirksam.

3). Die mobile Seite kann durch Berühren verschoben werden. Wenn dieser Vorgang jedoch verhindert werden muss, muss die Seitenbreite der Bildschirmbreite entsprechen und die Seite passt genau auf den Bildschirm dass die Seite nicht verschoben werden kann.

4). Wenn die Seite auf die Bildschirmbreite verkleinert wird, tritt ein Problem auf. Wenn das Textfeld aktiviert wird (den Fokus erhält), wird die Seite auf ihre Originalgröße vergrößert.

Aus Sicherheitsgründen wird daher empfohlen, die zweite Schreibweise zu verwenden.

Der Nachteil dabei ist natürlich, dass es den Benutzern das Zoomen untersagt. Wenn Sie interessiert sind, können Sie es hier nicht beschreiben .

Ein kleiner Exkurs:

Es gibt eine Eigenschaft in CSS3: -webkit-text-size-adjust.

Dieses Attribut deaktiviert auch die Schriftskalierung. Der Vorteil dieses Attributs besteht darin, dass der Bereich individuell angepasst und entsprechend den Projektanforderungen festgelegt werden kann.

Es ist zu beachten, dass die Funktion dieses Attributs darin besteht, die Textgrößenanpassungsfunktion des Webkit-Kernel-Browsers zu deaktivieren, anstatt den Seitenzoom zu steuern. Die Mindestschriftgröße der chinesischen Version des Chrome-Browsers beträgt 12 Pixel.

Aufgrund des Missbrauchs dieses Attributs wurde es jedoch vor einigen Jahren von Desktop-Browsern nicht mehr unterstützt, sodass ich es nie wirklich verwendet habe, sondern nur auf anderen Materialien gesehen habe.

【Verwandte Empfehlungen】

1. Besondere Empfehlung: Version „php Programmer Toolbox“ V0.1 herunterladen

2. Beispielcode zu Viewport-Kompatibilitätsproblemen

3. Viewport-Spezialthema: Detailliertes Verständnis von responsivem Webdesign im CSS-Viewport

4. Einführung in die Parameter von Viewport in HTML5 und wie man es verwendet

Das obige ist der detaillierte Inhalt vonTeilen Sie das Viewport-Attribut, um das Problem zu lösen, dass die Schriftart beim Wechsel vom vertikalen zum horizontalen Bildschirm auf dem mobilen Endgerät zurückgesetzt wird.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!