CSS und Safaris Schriftgrößen-Quirk

Es wurde beobachtet, dass Safari auf iPhones unerwartete Unterschiede in der Schriftgröße aufweist. Insbesondere erscheint Text mit kleineren Schriftgrößen (z. B. 13 Pixel) größer als Text mit größeren Schriftgrößen (z. B. 15 Pixel). Dieses rätselhafte Verhalten wirft die Frage auf: Gibt es CSS-bezogene oder andere Faktoren, die für die Überschreibung der Schriftgröße in Safari verantwortlich sind?

Um dieses Rätsel zu lösen, ist es wichtig, einen entscheidenden Aspekt von Safari auf Mobilgeräten zu verstehen. Als benutzerfreundliche Maßnahme passt Mobile Safari die Textskalierung automatisch an, wenn das Risiko einer zu kleinen Textdarstellung besteht. Dies ist ein Versuch, die Lesbarkeit insbesondere auf kleineren iPhone-Bildschirmen zu verbessern. Um diese automatische Anpassung zu umgehen, hilft eine CSS-Eigenschaft: -webkit-text-size-adjust.

Hier ist ein praktisches Beispiel, um die Verwirrung bei der Schriftgröße für iPhone-Benutzer zu beseitigen:

@media screen and (max-device-width: 480px) {
  body {
    -webkit-text-size-adjust: 100%;
  }
}

Dieses CSS-Snippet richtet sich an alle mobilen Geräte mit einer maximalen Gerätebreite von 480 Pixel (d. h. iPhone-Geräte) und deaktiviert die automatische Textskalierung von Safari innerhalb des

Zusammenfassend lässt sich sagen, dass die automatische Textskalierung von Mobile Safari darauf abzielt, die Lesbarkeit auf kleineren Bildschirmen zu optimieren. Dies kann jedoch zu unerwartetem Verhalten bei der Schriftgröße führen. Durch den Einsatz der Eigenschaft „-webkit-text-size-adjust“ können Entwickler die Kontrolle über die Schriftgröße wiedererlangen und eine konsistente Textanzeige auf verschiedenen Geräten, einschließlich iPhones, gewährleisten.