Font size rendering inconsistencies on an iPhone

Question

I’m testing my website and is working fine on every browser, except for the iphone browser (i think it’s mobile Safari?) that renders a piece of text with a bigger font that the rest. I’ve checked the CSS by hands and using firebug on the page and I can confirm I’ve put the same size to all of them. How do I fix this?

Answer 1

To improve on Lukasz's idea slightly, try using the following rule in your CSS:

body {
    -webkit-text-size-adjust: 100%;
}

Using the value '100%' instead of 'none', allows all other Webkit-based browsers to still resize text when using the zoom function while still preserving your original font size.

This issue is arising only in modern browsers like safari, opera with iPhone device. Solution is

Append this style with the -webkit-text-size-adjust: 100%; or -webkit-text-size-adjust: none; with required class it works fine. Example: I want the condition to be applied only when request comes from mobile. So I have appended the complete navigation path that full fills my requirement.

.mobile-phone .authenticated-page.authenticated.mobile-community.mobile-document .notification .notification-dialog.content-frame 
{
    -webkit-text-size-adjust: none;
}

or

.mobile-phone .authenticated-page.authenticated.mobile-community.mobile-document .notification .notification-dialog.content-frame {
-webkit-text-size-adjust: 100%;

} both will work fine. No need to apply the styles for complete body

Answer 2

Mobile Safari does try to adapt content so that it's readable on screen by default - it has different default styles to other browsers.

I don't know the exact rules - but when it comes to font sizes, it seems to work like this:

• Text inside a paragraph, list item, or other 'text' element: Apply the author's style without adapting.

• Text inside a DIV or other non-specific element: Treat as 'plain text' and 'adapt' the size according to Mobile Safari's rules.

So - the short answer is, wrap your text in a paragraph, and apply the font-size rule to that.

Here's a quick and dirty example:

<!-- Recommended: Put this in an external stylesheet -->
<style type="text/css">
    p { font-size:10px; }
</style>

<div class="appro_body">
  <p>SAN BENEDETTO - Si è ufficialmente aperta la campagna elettorale per le 
    comunali di San Benedetto del Tronto 2011. Le elezioni regionali, oramai
    dietro le spalle, sembra siano servite più che per organizzare il 
    territorio in crisi, per muovere le pedine in vista delle elezioni a 
    Sindaco.
    ...
    <a href="http://www.ilsegnale.it/it/news/approfondimento/1602/?tpl=502">Leggi tutto...</a>
  </p>
</div>

(obviously, you should move the font-size rule to the CSS file).

Answer 3

I fixed this same issue with:

<meta name="viewport" content="width=device-width">

From HTML5Boilerplate currently it's here

Answer 4

Put such a rule in your CSS and your problem is gone:

body {
    -webkit-text-size-adjust: none;
}

EDIT: A better solution, provided by user612626, is to use 100% instead of none.

Answer 5

Give body font-size:100%, then use "em" method to give font size to every element in your website.

This will make the font size 100% of the default font size by respective browser. For example iPhone safari browser has 12px = 1em (offcourse you need to check the default font size locally). Then if you want to have 10px font size, just divide it by 12, i.e "0.83em"

I hope you understand, also search for "css em unit" you will get better insight.

Answer 6

For me the other solution didn't work. Oddly enough, the only solution I found was to increase the width of my paragraph container by 2 pixels (by diminihsing the left and right padding by 1 pixel).

Here is what I tried to achieve: I wanted my paragraph to fit the width of the screen (375px), so that it does not skip a line, and so that it does not leave blank space around the text.

I tried all combination with font-size from 1.12em to 1.20em, it would either:

1. leave important free space around the text
2. skip one line

...but never the perfect result I expected, not even near decent. But when I reduced the padding left and padding right by 1 pixel, the problem would disappear.

I used -webkit-text-size-adjust: 100%; and other solutions but what worked for me was the above explanation. You can see on the image bellow (text is blurred but you get the idea) that now all space is used and working as intended. So, if you are desperate, give this solution a try even though that's not an ideal fix.