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


Tags: css,safari,font-size,portrait

Problem :

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

    CSS Howto..

    How to setting a Class in a conditional statement of Javascript?

    How can I use a CSS selector to match two classes being present?

    How can I track down a:hover jquery source?

    How to change style for before/after in Angular?

    How to make this layout in CSS?

    CSS: How to make link colour the same as parent div

    How to center an image between two columns in CSS?

    How to add custom CSS for displaying on mobile screens in WordPress?

    How to make partial scrolling div?

    How to realize a gradient like this with css

    How To Add Static Image to Table

    How can I add flashing effect to an option tag?

    How can I force a cached css file to be reloaded on a JSP (i.e. not PHP)?

    Check this web optimization report - how can I fix it?

    how to display image on mouse over by css

    How to exclude a child from the parent css property?

    How to blur background img - css?

    How do I change button color on press in bootstrap?

    How to detect when one or more JS/CSS library fail to load (e.g. CDN)?

    How to override all of the CSS for a specific element?

    How to Create hidden CSS?

    css footer background didn't shows properly in html5

    How to make background image on hover have a transition effect without default background image?

    How can I put my div “downloads” always 70px below my image

    How to remove CSS Class in aspx pages source codes using Regex?

    Why won't my SVG's show?

    How to avoid jquery library from effecting my css

    how to make header title with buttons

    How to use Bootstrap 3 grid if elements are tiled with different height and widths

    How to set two elements on the same line using CSS