CSS：在iPhone上禁用字体大小的自动缩放
[英]CSS: Disabling automatic rescaling of font-size on iPhone
问题描述
As explained here , the Apple iPhone (ie Safari) rescales the font-size when the viewport changes (ie from portrait to landscape or vice versa). 
正如解释在这里 ，苹果iPhone（即Safari浏览器）重新调整字体大小时，视口的变化（即从纵向到横向或反之亦然）。
The accepted answer to that question says that, in order to disable this behaviour, one should add: 对于该问题的公认答案是，为了禁用此行为，应添加：
-webkit-text-size-adjust: none; -webkit-text-size-adjust：无；
(Note: in other posts I've also seen '100%' instead of 'none', which may be preferable, but the distinction seems irrelevant here.) （注意：在其他帖子中，我也看到了“ 100％”而不是“无”，这可能是更好的选择，但是区别似乎在这里无关紧要。）
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: 因此，我的主要问题是，为什么当我在iPhone上查看以下HTML测试文件时，与纵向视图相比，固定大小的字体在横向上仍呈现更大的字体：
<!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? 但是，我也想让它确认Apple iPhone（可能还有其他Apple设备）是唯一显示这种（对我来说，很烦人）行为的设备...是真的吗？
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). 顺便说一句，我觉得很烦，因为如果我的网站（即字体大小）在其他移动设备上的呈现方式有所不同（并且我不完全信任在线模拟器），则无法在iPhone上正确测试。
Thanks. 谢谢。
1 个解决方案
解决方案1
1 2016-01-18 18:23:45
It does appear that this solution is right.. but according to Mozilla it is still experimentall. 看来这个解决方案是正确的..但是据Mozilla称，它仍然是实验性的。
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://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.