CSS and Safari's Font-Size Quirk

It has been observed that Safari on iPhones displays unexpected font sizing discrepancies. Specifically, text with smaller font sizes (e.g., 13px) appears larger than those with bigger sizes (e.g., 15px). This puzzling behavior raises the question: are there CSS-related or other factors responsible for Safari's font-size overrides?

To address this mystery, it's essential to understand a crucial aspect of Safari on mobile devices. As a user-friendly measure, Mobile Safari automatically adjusts text scaling when it senses the risk of overly small text rendering. This is an attempt to enhance readability, especially on smaller iPhone screens. To overcome this automated adjustment, a CSS property comes to the rescue: -webkit-text-size-adjust.

Here's a practical example to eliminate the font-size confusion for iPhone users:

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

This CSS snippet targets all mobile devices with a maximum device width of 480px (i.e., iPhone devices) and disables Safari's automatic text scaling within the

In conclusion, Mobile Safari's automatic text scaling aims to optimize readability on smaller screens. However, this can lead to unexpected font-size behaviors. By employing the -webkit-text-size-adjust property, developers can regain control over font sizing and ensure consistent text display across different devices, including iPhones.