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 can I center the column vertically in bootstrap mobile mode?

    How can I change the css properties of a google visualization table and it columns?

    Using bootstrap, how do you get columns to clear properly?

    How to create popup panel using JavaScript & CSS, no libraries?

    How do I center HTML objects on an MVC 4.0 Web API using Razor application?

    How to highlight a currently selected item/section in Wordpress with CSS (maybe PHP too)?

    scrollbars not showing in google chrome

    How can I fix the menu on the implanted header?

    CSS: how to get scrollbars for div inside container of fixed height

    How to create a div in the same size as the contained image. Both should be responsive

    How to verify background (css) image was loaded?

    How to stop Navigation bar list from changing position?

    How can I center an iframe but also have it display inline?

    How can I display these images with CSS instead of HTML?

    How to fixed image on every screen resolution?

    How to set background color of td in CSS

    How do I know which CSS is overriding my background image?

    How to specify a CSS border on hover around thumbnails?

    How to style an input that is a type=“button”?

    How to make this layout in CSS?

    How to refresh to top of HTML page using css

    How to apply a CSS property to an element using it's CSS path in Javascript?

    How to display a div on hover of button using css

    how to dynamically change the property of css using jquery

    How to make liquid layout in css using em?

    How to layout a form like this with CSS and maybe some JS?

    How to make margins collapse evenly?

    How to select an item that is into another item using CSS?

    How do I change button color on press in bootstrap?

    How to add multiple style rules to css pseudo elements using js?