Verwenden Sie die Anpassung der Textgröße in Ihren globalen Stilen?

Kürzlich bin ich auf ein rätselhaftes CSS-Problem gestoßen, das nur auf echten Mobilgeräten, insbesondere iOS Safari, auftrat. Bestimmte Schriftarten wirkten unverhältnismäßig groß, was die Integrität des Layouts beeinträchtigte. Der Versuch, dies zu beheben, indem in Entwicklungstools unterschiedliche Schriftgrößen angewendet wurden, und selbst die Verwendung von !important hatte keine Wirkung. Unten sehen Sie die gewünschte Bildschirmdarstellung und den Bildschirm, den ich letztendlich gesehen habe.

Verstehen, was los ist

Bei meiner Recherche habe ich herausgefunden, dass mobile Browser manchmal die Schriftgröße dynamisch anpassen, um die Lesbarkeit für Benutzer zu verbessern. Das Darstellungsverhalten mobiler Browser unterscheidet sich von dem von Desktop-Browsern. Im Gegensatz zu Desktop-Browsern, die Seiten normalerweise in der Breite des Gerätebildschirms rendern, verwenden mobile Browser häufig einen größeren Ansichtsbereich, der üblicherweise standardmäßig auf 980 Pixel eingestellt ist, um Websites zu berücksichtigen, die nicht für kleinere Bildschirme optimiert sind. Dies führt unweigerlich zu einem horizontalen Scrollen. Um dem entgegenzuwirken, wird in HTML häufig die folgende Regel verwendet, um sicherzustellen, dass das Ansichtsfenster genau an die Gerätegröße angepasst wird.

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

Bei der Verkleinerung auf den Bildschirm eines Mobilgeräts stellen einige Browser den Text jedoch möglicherweise zu klein dar, sodass ein Textinflationalgorithmus angewendet werden muss, um ihn für eine bessere Lesbarkeit zu vergrößern. Dieser Algorithmus führt manchmal zu einer unerwarteten Schriftvergrößerung, die sich insbesondere dann bemerkbar macht, wenn bei einem Element, das sich über die gesamte Breite des Bildschirms erstreckt, die Textgröße vergrößert wird, ohne dass sich das Layout ändert. Um dieses Verhalten zu beheben und eine einheitliche Textgröße auf allen Geräten aufrechtzuerhalten, können wir die CSS-Eigenschaft text-size-adjust verwenden.

Die Textgrößenanpassung ermöglicht es Webautoren, dieses automatische Textaufblasverhalten zu deaktivieren oder anzupassen, was besonders wichtig für Websites ist, die für kleine Bildschirme konzipiert sind (was meiner Meinung nach bei den meisten neuen Websites der Fall ist). Diese Eigenschaft steuert den Textinflationsalgorithmus, der auf einigen Smartphones und Tablets verwendet wird. Andere Browser ignorieren es. Die Standardgrößenanpassung wirkt sich auf Text- und Formularsteuerelemente aus, unabhängig davon, ob diese Formularsteuerelemente Text enthalten (z. B. Texteingaben, Auswahlmöglichkeiten) oder nicht (z. B. Optionsfelder, Kontrollkästchen).

Es gibt 3 mögliche Werte:

• auto: Dieser Wert weist Renderer an, beim Rendern von Text auf kleinen Geräten die Standardgrößenanpassung zu verwenden.
• keine: Renderer werden angewiesen, keine Größenanpassung für Text vorzunehmen, der auf kleinen Geräten angezeigt wird.
• Prozentsatz[0,∞]: Renderer dürfen keine Größenanpassung vornehmen, stattdessen muss der berechnete Wert der Schriftgröße mit diesem Prozentsatz multipliziert werden. Die Verwendung von 100 % ist gleichbedeutend mit der Verwendung von keinem.

Mein Ansatz zur Behebung dieses Problems

Ich habe das Problem der Textinflation behoben, indem ich diese Eigenschaft als Teil unserer globalen CSS-Stile zum Textkörper hinzugefügt habe (kann auch zu HTML hinzugefügt werden). Ich empfehle, diese Regel zu Ihrer globalen/zurücksetzen/normalisierenden CSS-Datei hinzuzufügen:

body {
    // prevent font-size inflation on small devices
    text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

Nur ​​für iOS Safari funktioniert -webkit-text-size-adjust, aber ich habe andere Anbieter und eine Nicht-Anbieter-Eigenschaft eingebunden, um Unterstützung für andere Browser hinzuzufügen. Es ist sehr wichtig, die Nicht-Vendor-Eigenschaft zu Beginn hinzuzufügen. Wenn es am Ende hinzugefügt wird, überschreibt es in Safari iOS das -webkit, und da es nicht unterstützt wird, wird es nicht angewendet, sodass die Dinge wie standardmäßig funktionieren.

Einige weitere Überlegungen, die Sie beachten sollten:

• Experimenteller Charakter: Bei der Implementierung der Eigenschaft zur Anpassung der Textgröße in Produktionsumgebungen ist Vorsicht geboten, da es sich weiterhin um eine experimentelle Funktion handelt. Die Browserunterstützung und -implementierung kann sich im Laufe der Zeit ändern.
• Definition von „Kleingerät“: Es besteht immer noch Unklarheit hinsichtlich der Definition dessen, was ein „Kleingerät“ ausmacht.
• Einige Leute haben sich darüber beschwert, dass die Verwendung von „Keine“ das Zoomen auf Mobiltelefonen verhindert, aber das war bei meinen Tests nicht der Fall, „Keine“ und 100 % funktionierten genauso wie in der MDN-Erklärung.

Wie andere es nutzen

Mehrere beliebte CSS-Reset-/Normalisierungsbibliotheken enthalten einige Variationen der Textgrößenanpassung.

• normalize.css
• Der neue CSS-Reset
• sanitize.css.

Danke fürs Lesen!? Hier finden Sie zusätzliche Ressourcen, falls Sie jemals Lust haben, mehr darüber zu lesen.

• drafts.csswg.org

• Webreferenz

• developer.apple.com.

Das obige ist der detaillierte Inhalt vonVerwenden Sie die Anpassung der Textgröße in Ihren globalen Stilen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!