CSS：在iPhone上禁用自动缩放字体大小 [英] CSS: Disabling automatic rescaling of font-size on iPhone
问题描述
如这里所述，Apple iPhone （即Safari）在视口改变时调整字体大小（即从纵向到横向或反之亦然）。
这个问题的接受答案说，要禁用此行为，请添加：
-webkit-text-size-adjust：none;
（注意：在其他帖子中，我也看到'100％'而不是'无'，这可能是更好的，但是这里的区别似乎不相干。）
，我的主要问题是为什么当我在我的iPhone上查看以下HTML测试文件时，固定大小的字体STILL在横向渲染比纵向视图更大：
< blockquote>
<！doctype html>
< html>
< head>
< meta charset =utf-8>
< title>无标题文档< / title>
< style>
p {
font-size：24px;
-webkit-text-size-adjust：none;
}
< / style>
< / head>
< body>
< p>这是一个示例文本< / p>
< / body>
< / html>
但是，我也想确认苹果iPhone - 可能还有其他苹果设备 - 是唯一的设备显示这（对我，恼人的）行为...是真的吗？
顺便说一下，我觉得讨厌因为如果我的网站（即字体大小）在其他移动设备上呈现不同（我不完全信任在线仿真器），我在iPhone上无法正常测试。
谢谢。
看起来这个解决方案是正确的...但根据Mozilla它仍然是实验。
这些是您可以尝试的一整套值，但开发人员仍在努力使移动算法正确，以避免问题的出现。也许其他值之一将更好地为你工作。
/ *文本不会膨胀* /
text-size-adjust：none;
/ *文本可能会膨胀* /
text-size-adjust：auto;
/ *文本可能以这个精确的比例膨胀* /
text-size-adjust：80％;
/ *全局值* /
text-size-adjust：inherit;
text-size-adjust：initial;
text-size-adjust：unset;
您可以在这里找到更多信息。
https://developer.mozilla.org/en- US / docs / Web / CSS / text-size-adjust
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.
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
这篇关于CSS：在iPhone上禁用自动缩放字体大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
