Font size rendering inconsistencies on an iPhone

问题:

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?

回答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

回答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).

回答3:

I fixed this same issue with:

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

From HTML5Boilerplate currently it's here

回答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.

回答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.