Ihr CSS-Reset benötigt Text-size-adjust (wahrscheinlich)

Kilian Valkhof:

[…] Mobile Safari vergrößert die Standard-Schriftgröße, wenn Sie eine Website von Hoch- auf Querformat wechseln. Auf Handys, nicht auf iPads. Safari tut dies schon seit langem, um die Lesbarkeit auf nicht für Mobilgeräte optimierten Websites zu verbessern. Während dies zweifellos nützlich war, als praktisch keine Website für Mobilgeräte optimiert war, ist es heutzutage deutlich weniger hilfreich. […] Eine zufällige Vergrößerung der Textgröße in einer einzigen Situation ist genau die Art von Problem, vor dem Sie sich mit einem CSS-Reset schützen wollen.

Das ist buchstäblich das, was text-size-adjust tut. MDN

Wenn ein Element, das Text enthält, 100 % der Bildschirmbreite nutzt, erhöht der Algorithmus dessen Textgröße, ohne das Layout zu verändern. Die Eigenschaft text-size-adjust erlaubt es Webautoren, dieses Verhalten zu deaktivieren oder zu ändern, da Webseiten, die für kleine Bildschirme konzipiert sind, dies nicht benötigen.

Sie können sich Apples eigene Dokumentation ansehen, die zeigt, dass dies genau das ist, was sie tun (auf iPhones). Es gibt einen alten Bug, bei dem dies das Zoomen verhinderte, aber das ist wahrscheinlich kein großes Problem mehr.

Kilians Empfehlung

html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

Firefox unterstützt es nicht einmal, daher würde ich vielleicht auf den Vendor-Präfix verzichten, aber ansonsten bin ich einverstanden. Ich glaube, dass ich meine eigene Textgröße handhaben kann.

Erinnert mich daran, wie Mobile Safari dieses Zoom-Verhalten bei Texteingaben unter 16px hat, also achten Sie auch darauf.

Direkter Link →