Why is My Text Displaying Larger Than Expected in Safari on iPhone?

Font-Size Inconsistencies in Safari on iPhone

Despite setting explicit font sizes, you may encounter instances where Safari on iOS displays certain text larger than expected, even when the font-size value is smaller. This anomaly can be traced back to Safari's default behavior of automatically resizing text deemed too small for readability on mobile devices.

Addressing the Issue with -webkit-text-size-adjust

To circumvent this issue, you can employ the CSS property -webkit-text-size-adjust. By setting -webkit-text-size-adjust: 100%; on your body element, you instruct Safari on iPhone to adhere to your specified font sizes, overriding its automatic scaling. Here's a sample implementation:

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

This media query targets devices with a maximum width of 480 pixels, ensuring that the -webkit-text-size-adjust property applies only to iPhone screens. By disabling Safari's automatic scaling within this media query, you can ensure that all text, regardless of its font size, will render as specified in your stylesheet.

The above is the detailed content of Why is My Text Displaying Larger Than Expected in Safari on iPhone?. For more information, please follow other related articles on the PHP Chinese website!