获取iPhone字体大小与其他浏览器相同

Question

很久以前,我读了一篇很棒的文章,描述了使用CSS调整文本大小的跨浏览器友好方式.所描述的策略是这样的:

body {
    font-size:100%;
    line-height:1.125em; /* 16×1.125=18 */
}
.bodytext p {
    font-size:0.875em; /* 16x.875=14 */
}
.sidenote {
    font-size:0.75em; /* 16x0.75=12 */
}

这种策略适用于除iPhone上的Safari之外的所有浏览器,它总是似乎放大了某些文本.是否有任何策略可以防止这种情况发生？

通常情况下我的解决办法是增加-webkit-text-size-adjust: none;防止iPhone从扩大文本的大小,但我最近碰上了这篇文章,其中描述了它不允许用户放大上就任何Safari浏览器的文本-明确一个问题.我知道那里有一个只有CSS的解决方案,但我找不到它.我只是想知道如何设置字体大小,以便它们在所有浏览器上显示相同的内容,包括iPhone.

更新:要举例说明,如果您在iPhone上查看此内容,您会发现段落中的文字明显大于网站周围的其他文字.为什么这篇文章被挑出来了,有什么方法可以通过查看代码来判断它会发生什么？

Answer 1

你有一种你很满意的技术,但有一个缺点:

这种策略适用于除iPhone上的Safari之外的所有浏览器,它总是似乎放大了某些文本.是否有任何策略可以防止这种情况发生？

..

通常我的解决方案是添加-webkit-text-size-adjust:none; 为了防止iPhone扩大文本的大小,但我最近遇到了这篇文章,其中描述了它不允许用户放大任何Safari浏览器上的文本 - 显然是一个问题.我知道那里有一个只有CSS的解决方案,但我找不到它.

看着style.css从http://html5boilerplate.com/mobile/

/* Prevent mobile zooming while remain desktop zooming.
   github.com/shichuan/mobile-html5-boilerplate/issues/closed#issue/14
 */
body {
    -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: none;
}

这听起来就像你正在追求的,特别是当你阅读链接中的评论时:

只是一个建议,似乎是一个好主意 -webkit-text-size-adjust,100%而不是none.将其设置为none 阻止桌面WebKit浏览器中的字体缩放,这似乎是一个可访问性问题.Mobile Safari的默认值已结束100%,这就是文本更大的原因 - 因此,如果将其设置为100%而不是无,则字体在移动设备上保持正确的大小,但仍可在桌面上缩放.