CSS: Disabling automatic rescaling of font-size on iPhone
Question
As explained here , the Apple iPhone (ie Safari) rescales the font-size when the viewport changes (ie 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 (ie font-size) is rendered differently on other mobile devices (and I don't fully trust online emulators).
Thanks.
1 answers
solution1
1 2016-01-18 18:23:45
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.