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

CssSafariMobile SafariFont Size

Css Problem Overview


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?

Css Solutions


Solution 1 - Css

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: none;
  }
}

Solution 2 - Css

Solution 3 - Css

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

Solution 4 - Css

I don't use pixel definitions anymore as they are really confusing and aren't exactly the same across visual services.

Meet the Units

  1. “Ems” (em): The “em” is a scalable unit that is used in web document media. An em is equal to the current font-size, for instance, if the font-size of the document is 12pt, 1em is equal to 12pt. Ems are scalable in nature, so 2em would equal 24pt, .5em would equal 6pt, etc. Ems are becoming increasingly popular in web documents due to scalability and their mobile-device-friendly nature.
  2. Pixels (px): Pixels are fixed-size units that are used in screen media (i.e. to be read on the computer screen). One pixel is equal to one dot on the computer screen (the smallest division of your screen’s resolution). Many web designers use pixel units in web documents in order to produce a pixel-perfect representation of their site as it is rendered in the browser. One problem with the pixel unit is that it does not scale upward for visually-impaired readers or downward to fit mobile devices.
  3. Points (pt): Points are traditionally used in print media (anything that is to be printed on paper, etc.). One point is equal to 1/72 of an inch. Points are much like pixels, in that they are fixed-size units and cannot scale in size.
  4. Percent (%): The percent unit is much like the “em” unit, save for a few fundamental differences. First and foremost, the current font-size is equal to 100% (i.e. 12pt = 100%). While using the percent unit, your text remains fully scalable for mobile devices and for accessibility.

Solution 5 - Css

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.

Solution 6 - Css

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionAlexView Question on Stackoverflow
Solution 1 - CssDavid KanedaView Answer on Stackoverflow
Solution 2 - Cssuser3276706View Answer on Stackoverflow
Solution 3 - CssjohnpolacekView Answer on Stackoverflow
Solution 4 - Cssuser384929View Answer on Stackoverflow
Solution 5 - CssmarebuffiView Answer on Stackoverflow
Solution 6 - Cssme1974View Answer on Stackoverflow