CODEWITHSUNDEEP
csssafarimobile-safarifont-size
Alex
Alex

Reputation: 77379

Some font-size's rendered larger on Safari (iPhone)

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?

Upvotes: 132

Views: 88870

Answers (5)

David Kaneda
David Kaneda

Reputation: 5510

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%;
  }
}

Upvotes: 297

marebuffi
marebuffi

Reputation: 51

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.

Upvotes: 2

user3276706
user3276706

Reputation: 201

Use 100% instead of None.

normalize.css includes this

Upvotes: 20

johnpolacek
johnpolacek

Reputation: 2800

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;" />

Upvotes: 16

me1974
me1974

Reputation: 99

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 %%.

Upvotes: 0

Related Questions