ios 自动缩小字体_CSS：在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:

Untitled Document

p {

font-size:24px;

-webkit-text-size-adjust:none;

}

This is an example text

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.

解决方案

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.