CSS 如何避免iOS自动字体大小调整?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/6210788/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to avoid iOS automatic font size adjustment?
提问by Alan H.
I am NOTtalking about zooming the page, but rather the way MobileSafari on iOS automatically bumps up some font sizes sometimes.
我不是在谈论缩放页面,而是在 iOS 上的 MobileSafari 有时会自动增加一些字体大小。
When, exactly, is this done? Can it be prevented or discouraged?
具体什么时候完成?它可以被阻止或阻止吗?
采纳答案by Alan H.
Had a lot of trouble tracking it down, but: it's the -webkit-text-size-adjust
property in CSS.
跟踪它时遇到了很多麻烦,但是:它是-webkit-text-size-adjust
CSS 中的属性。
Read more about it and other iOS-specific CSS here.
Values:
价值观:
- Percentage (of default size), e.g.
120%
, or100%
auto
(the default)none
– ifauto
isn't working for your page. However this often causes problems with zooming. Use100%
instead.For example, open Safari on your desktop and zoom the page (Command-Plus) –?your text won't be enlarged, even though the entire page has zoomed! Don'tusenone
!
- 百分比(默认大小),例如
120%
,或100%
auto
(默认)none
– 如果auto
不适用于您的页面。然而,这通常会导致缩放问题。使用100%
来代替。例如,在桌面上打开 Safari 并缩放页面(Command-Plus)——即使整个页面都已缩放,您的文本也不会被放大!不要用none
!
Note that these can be applied not just at the page level but at the element/widget/container level.
请注意,这些不仅可以应用于页面级别,还可以应用于元素/小部件/容器级别。
(I would not just specify a value of 100%
for my website unless I was damn sure it was already optimized for small screens, and never none
since it causes problems.)
(我不会只100%
为我的网站指定一个值,除非我非常确定它已经针对小屏幕进行了优化,而且从来没有none
因为它会导致问题。)
Please note that in Firefox Mobile(e.g. for Android and Firefox OS) there is a similar property, -moz-text-size-adjust
, documented here. Thanks to Costa for pointing this out.
请注意,在Firefox Mobile(例如 Android 和 Firefox OS)中,有一个类似的属性-moz-text-size-adjust
,记录在此处。感谢科斯塔指出这一点。
Apparently Microsoft also has a version of this for mobile IE: -ms-text-size-adjust
.
显然,微软也有一个用于移动 IE 的版本:-ms-text-size-adjust
.
回答by BoltClock
body {
-webkit-text-size-adjust: 100%;
}
Just make sure all your text is at a legible size in the first place. The iPhone and iPod touch have a rather small screen, so keep that in mind too.
首先要确保所有文本的大小都清晰易读。iPhone 和 iPod touch 的屏幕很小,所以也要记住这一点。
回答by dc-
The accepted answer works, but in other webkit browsers it locks in the font-size
for people that are zooming. Using 100%
instead of none works both ways:
接受的答案有效,但在其他 webkit 浏览器中,它会锁定font-size
正在缩放的人。使用100%
而不是无两种方式:
body {
-webkit-text-size-adjust: 100%;
}