如何避免iOS自动字体大小调整？

Question

我不是在谈论缩放页面,而是iOS上的MobileSafari有时会自动碰到一些字体大小.

究竟是什么时候完成的？可以预防或劝阻吗？

Answer 1

body {
    -webkit-text-size-adjust: 100%;
}

首先要确保所有文字都清晰可读.iPhone和iPod touch的屏幕相当小,所以请记住这一点.

切勿将其放在"身体"中; 它应该在320px设备宽度的媒体查询中,如果你想要它的iPhone. (5认同)
Apple的文档:http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/css/property/-webkit-text-size-adjust (3认同)
请注意,这样可以防止在webkit浏览器(Safari,Chrome)中调整文本大小,因此缩放只会放大图像而不是文本. (2认同)

Answer 2

跟踪它有很多麻烦,但是:它是-webkit-text-size-adjustCSS中的属性.

价值观:

百分比(默认大小),例如120%,或100%
auto (默认)
none- 如果auto不适合您的页面.但是,这通常会导致缩放问题.请100%改用.例如,在桌面上打开Safari并缩放页面(Command-Plus) - 即使整个页面已缩放,您的文本也不会被放大!不要用none!

请注意,这些不仅可以应用于页面级别,还可以应用于元素/小部件/容器级别.

(我不会只100%为我的网站指定一个值,除非我确定它已经针对小屏幕进行了优化,并且从来没有none因为它会导致问题.)

请注意,在Firefox Mobile中(例如Android和Firefox OS)-moz-text-size-adjust,此处记录了类似的属性.感谢Costa指出这一点.

显然,微软也有一个适用于移动IE的版本:-ms-text-size-adjust.

我从不问一个问题*有意*自己回答,但是接受我自己的答案*当且仅当我认为它是最好的答案时,向观众表示同样多的答案.如果你不喜欢那样,那么你可以弯腰.(在这种情况下,我搜索了十五分钟,什么也没找到,问了这个问题,然后立即找到了正确的文档.谁在乎？净效果是我正在使更好的信息更容易找到.) (21认同)

Answer 3

接受的答案有效,但在其他webkit浏览器中,它锁定了font-size缩放的人.使用100%而不是无效两种方式:

body {
    -webkit-text-size-adjust: 100%;
}