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

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

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

另外，line-height，不幸的是，总是存在差异（即使在 Mac 上的 Safari 和 Firefox 之间），但您始终可以为 Internet Explorer 使用条件样式，如果需要，请使用 Firefox 的 @987654323 的 javascript 解决方案@。

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

Answer 2

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

此策略适用于所有 iPhone 上除 Safari 以外的浏览器， 这似乎总是扩大某些 一些文字。有什么策略可以 防止这种情况发生？

..

通常我的解决方案是添加 -webkit-文本大小调整：无；以防止 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% 而不是没有，字体保持不变 移动设备上的正确尺寸，但可以 仍然可以在桌面上放大。