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

Question

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

15

很久以前，我读了一篇非常好的文章，介绍了使用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外的所有浏览器上都效果很好，但在iPhone上总是似乎会放大某些文本。有没有什么解决方法可以防止这种情况发生？

通常我的解决方案是添加 -webkit-text-size-adjust: none;来防止iPhone放大文本大小，但我最近看到了这篇文章，描述称它不允许用户在任何Safari浏览器上放大文本——显然是个问题。我知道有一种基于CSS的解决方案，但我找不到它。我只想知道应该如何设置字体大小，以便它们在所有浏览器上，包括iPhone上显示相同。

更新：为了举例，如果您在iPhone上查看这个，您会注意到段落中的文本明显比站点周围的其他文本大得多。为什么这段文本被单独选中，并且有没有任何方法可以通过查看代码来判断是否会发生这种情况？

- Wex

1

请记住，无障碍标准可能会阻止您完全实现所需的内容。固定字体大小对于视力受损的人来说是一场噩梦。 - Rippo

在这种情况下，您唯一的解决方案是使用图像而不是文本。我认为您在这里提出了不可能的要求。 - Rippo

1

@Wex，该样式#content .article中没有声明font-size。也许你可以明确地声明一个？ - Jason Gennaro

我并不是特别需要针对这个具体网站的修复（你所建议的可能会起作用），我更想知道为什么在iPhone上单独选择了那个标签，哪些其他标签也会共享相同的行为，并且有一种方法可以一次性处理它们，这样我就永远不必再考虑它们了。 - Wex

1

如果它能正常工作，那是因为据我所知，iPhone会获取元素的宽度并确定适当的文本比例，以使内容易读...如果没有明确设置font-size。 - Jason Gennaro

显示剩余6条评论

2个回答

0

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

此外，line-height也存在差异（即使在Mac上的Safari和Firefox之间也是如此），但您始终可以为Internet Explorer使用条件样式，并在需要时为Firefox的line-height使用JavaScript解决方案。

最后，一些字体在跨浏览器显示时可能会有所不同，这需要进行测试。

- jackJoe

我理解它们显示不同 - 我的问题是如何修复这些差异。 - Wex

@Wex 即使使用像素和使用大多数浏览器支持的字体？这是我的两个主要解决方案。 - jackJoe

@Wex - 简而言之，jackJoe 的意思是，如果你使用每个浏览器都支持的像素和字体（即使是所谓的“Web 安全”字体），你无法解决差异。简单来说，在每个浏览器上，事物看起来都会有所不同，对于某些事情，你无能为力。这不是纸质设计，也不应该被视为如此。最好是接受或至少考虑那些无法改变的差异。否则，你会疯狂地尝试在每个想象得到的浏览器中让一切完全相同。 - Shauna

@Shauna，我说使用像素+普通字体，通常在跨浏览器方面效果良好。OP还没有回复确认是否正在使用此组合。它可能看起来不同，但有不同程度的差异，我认为下一步是让@Wex发布一些代码，然后我们可以测试并查看这些差异。 - jackJoe

@jackJoe - 即使使用“普通”或“网页安全”字体，也不是每个平台的每个浏览器都会完全相同（http://www.webspaceworks.com/resources/fonts-web-typography/41/）。我的观点是，这应该是需要考虑到的事情，因为在最好/最可靠的情况下，即使是最好的情况下，这种变化也会有一些差异。就像你说的那样，我们只是在猜测，直到他给我们更多的信息。 - Shauna

我重新写了整个问题，希望这样能够澄清事情。 - Wex

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- thirtydot · Accepted Answer

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

这种策略在除iPhone上的Safari浏览器外都表现得很好，但是在iPhone上总是似乎会放大某些文本。有什么策略可以防止这种情况发生吗？

...

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

查看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;
}

听起来正是您想要的，特别是当您阅读链接中的评论时：

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