Why Does Safari on iPhone Ignore My Font-Size Settings?

Why Safari/iPhone Ignores Some Font-Size Settings

When styling your website, you may encounter instances where font-size settings are disregarded in Safari on iPhones. This puzzling behavior is attributed to Mobile Safari's automatic scaling of text to improve readability on small screens.

The Solution:

To override this scaling behavior, utilize the CSS property -webkit-text-size-adjust. This property instructs the browser to adjust the text size to the specified percentage. By setting it to 100%, you disable automatic scaling.

Here's how to apply this fix specifically for iPhones:

<code class="css">@media screen and (max-device-width: 480px){
  body{
    -webkit-text-size-adjust: 100%;
  }
}</code>

By implementing this fix, you can ensure that your font sizes are rendered as intended, regardless of the device or browser being used.

The above is the detailed content of Why Does Safari on iPhone Ignore My Font-Size Settings?. For more information, please follow other related articles on the PHP Chinese website!