CSS: Disabling automatic rescaling of font-size on iPhone

问题

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;

(Note: in other posts I've also seen '100%' instead of 'none', which may be preferable, but the distinction seems irrelevant here.)

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>

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 I can't test properly on my iPhone if my website (i.e. font-size) is rendered differently on other mobile devices (and I don't fully trust online emulators).

Thanks.

回答1:

It does appear that this solution is right.. but according to Mozilla it is still experimentall.

These are the full set of values you can try but developers are still working to get the mobile algorithm correct to not have the issue are experiencing. Maybe one of the other values would work better for you.

/* Text is never inflated */
text-size-adjust: none;

/* Text may be inflated */
text-size-adjust: auto;

/* Text may be inflated in this exact proportion */
text-size-adjust: 80%;

/* Global values */
text-size-adjust: inherit;
text-size-adjust: initial;
text-size-adjust: unset;

You can find more information here.

https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust

来源：https://stackoverflow.com/questions/34860866/css-disabling-automatic-rescaling-of-font-size-on-iphone

标签

css

iphone

font-size

portrait