Question

很久以前，我读了a great article，它描述了使用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扩大文字大小，但我最近遇到this article，其中描述了它不允许用户放大在任何Safari浏览器上的文本 - 显然是一个问题。我知道那里有一个只有CSS的解决方案，但我找不到它。我只是想知道如何设置字体大小，以便它们在所有浏览器上显示相同的内容，包括iPhone。

更新：为了显示示例，如果您在iPhone上查看this，您会发现段落中的文字明显大于网站周围的其他文字。为什么这篇文章被挑出来了，有什么方法可以通过查看将要发生的代码来判断？

Answer 1

你有一种你很满意的技术，但有一个缺点：

这种策略在每一个方面都很有效   浏览器除了iPhone上的Safari，   这似乎总是放大一些   一些文字。是否有任何策略   防止这种情况发生？

...

通常我的解决方案是添加   -webkit-text-size-adjust：none;防止iPhone扩大   文字的大小，但我最近来了   横跨this article，描述   它不允许用户放大   在任何Safari浏览器上的文字 -   显然是个问题。我知道那里   是一个只有CSS的解决方案，但是   我找不到了。

从http://html5boilerplate.com/mobile/

查看style.css

/* 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;
}

这听起来就像你正在追求的，特别是当你阅读the comment in the link时：

只是一个建议，似乎是一个设置好主意 -webkit-text-size-adjust改为100%而不是none。将其设置为none 防止在桌面上缩放字体 WebKit浏览器，看起来像一个可访问性问题。移动Safari的默认值超过100%，即为什么文字更大 - 所以如果你设置它到100%而不是没有，字体保持不变移动设备上的正确尺寸但可以仍然可以在桌面上放大。

Answer 2

根据我的经验，使用像素而非点数，Mac和PC以不同方式显示点，而像素或多或少相同（说实话，总是有差异，但有像素，它不太明显）。

此外，line-height，遗憾的是总是存在差异（甚至在Mac上的Safari和Firefox之间），但是你总是可以使用Internet Explorer的条件样式，如果需要，可以使用Firefox的JavaScript解决方案line-height。

最后，某些字体可以以不同的方式显示跨浏览器，这是一个测试问题。

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

2 个答案: