129

Are there CSS or other reasons why Safari/iPhone would ignore some font-size settings? On my particular website Safari on the iPhone renders some font-size:13px text larger than font-size:15px text. Does it maybe not support font-size on some elements?

5 Answers 5

292

Joe's response has some good best practices in it, but I think the problem you're describing centers around the fact that Mobile Safari automatically scales text if it thinks the text will render too small. You can get around this with the CSS property -webkit-text-size-adjust. Here's a sample of how to apply this to your body, just for the iPhone:

@media screen and (max-device-width: 480px){
  body{
    -webkit-text-size-adjust: 100%;
  }
}
6
  • 2
    Just ran into this issue. This little media screen hack works flawlessly. I'm going to start incorporating it into my CSS starter file. Commented Jan 30, 2013 at 16:32
  • 2
    Make sure to use the media query. It seems that this can make some text difficult to read: Beware of -webkit-text-size-adjust:none
    – Gemmu
    Commented Feb 13, 2015 at 12:46
  • 16
    Answer should be updated to -webkit-text-size-adjust: 100% - this avoids the automatic update, but allows user initiated zoom. (source) Commented Jan 17, 2017 at 19:03
  • I think there's a further issue: If you do some media query like '@media screen and (min-width: 475px){h1 {font-size: 3em;}}': e.g. iPhone6 is effectively 750px so this rule applies... However with high pixel-ratio, for all the rest it acts as if screen about 320px wide... so you would want the "less-than-475px"-rules to apply? Commented Oct 5, 2020 at 19:33
  • also add -moz-text-size-adjust: 100%; and text-size-adjust:100%; to maximize compatibility Commented May 18, 2023 at 16:11
19

Use 100% instead of None.

normalize.css includes this

15

Also, make sure you are setting the initial zoom setting to 1 in your viewport meta tag:

<meta name="viewport" content="width=device-width; initial-scale=1.0;" />
1

Also check if you don't have a "width/height" set to the elements you're manipulating, Safari gives sizing precedence over font size in svg's, Chrome and FF don't, it seems, currently at least.

0

I had the same problem, turns out in the original CSS there was this line:

-webkit-text-size-adjust: 120%;

I had to change it to 100%, and everything was smooth. No need to change all px to em or %%.

2
  • The designer should be using em for font sizes anyways. Commented Feb 7, 2013 at 13:48
  • 2
    ...except in the body tag css where a px size is best. Commented May 21, 2013 at 9:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.