Search code examples
csssafarifont-sizeportrait

CSS: how to do away with automatic rescaling of font-size on Safari

Note: I'm posting this question again, with very slight modification, as the first time the issue didn't get resolved. The earlier question is found here: CSS: Disabling automatic rescaling of font-size on iPhone, but as I said it's almost identical; it has one answer that unfortunately didn't clarify much for me...]

As explained here, the Apple iPhone (i.e. Safari) rescales the font-size when the viewport changes (i.e. from portrait to landscape or vice versa).

The accepted answer to that question says that, in order to disable this behaviour, one should add:

-webkit-text-size-adjust: none;

Accordingly, my main question is why, when I view the following HTML test-file on my iPhone, the fixed-sized font is STILL rendered bigger in landscape as compared to portrait view: 

<!doctype html>
<html>
    <head> 
        <meta charset="utf-8"> 
        <title>Untitled Document</title> 
        <style> 
            p { 
              font-size:24px;
             -webkit-text-size-adjust:none;
             } 
        </style> 
    </head>
    <body> 
        <p>This is an example text</p> 
    </body>     
</html>

(Note: in other posts I've also seen '100%' instead of 'none', which is probably preferable, but the distinction seems irrelevant here, as neither works.)

However, I'd also like to have it confirmed that the Apple iPhone - and possibly other Apple devices - are the ONLY devices displaying this (to me, annoying) behaviour... is that true?

Incidentally, I find it annoying because now I can't test properly on my iPhone, knowing that my website (i.e. font-size) is rendered differently on other mobile devices (and I don't fully trust online emulators).

Thanks.

Solution

  • It's to do with font sizing you use apparently, on this site I use the following css:

    html, body
{
    font-size: 100%; /* equivalent to 16px */
}

    for the style sheet that effects the fonts for mobile I only put sizes that are larger than 16px for the sake of peoples eye sight, eg

     h2
{
  font-size:1.5rem; 
  /* notice the use of rem as compared to em - I don't use px for font sizes so I don't know about that */
}

    http://www.awri.com.au/research_and_development/metabolomics_facility/

    FYI my meta tag is:

    <meta name="viewport" id="viewport" content="width=device-width,user-scalable=yes,initial-scale=1" />