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

Posted 2023-03-06

【中文标题】让 iPhone 字体大小与其他浏览器相同

【英文标题】：Get iPhone font-size to be the same as other browsers

【发布时间】：2011-09-09 20:48:27

【问题描述】：

很久以前，我读过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，您会注意到段落中的文本明显大于站点周围的其余文本。为什么要挑出这段文字，有什么方法可以让我仅通过查看代码就知道会发生这种情况？

【问题讨论】：

请记住，可访问性标准可能会阻止您完全实现您的要求。固定字体大小对于视障人士来说是一场噩梦。

我不希望字体大小一定是“固定的”，我只是希望它们默认都显示相同的大小。

在这种情况下，您唯一的解决方案是使用图像而不是文本。我想你在这里问的是不可能的事情。

@Wex 没有为该样式声明 font-size #content .article。也许如果你明确声明一个？

@Wex 如果它有效，那是因为 - 据我所知 - iPhone 获取元素的宽度并确定适当的文本比例，以便内容清晰可见......如果没有 @987654328 @ 是明确设置的。

【参考方案1】：

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

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

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

【讨论】：

我了解它们的显示方式不同 - 我的问题是如何解决这些差异

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

@Wex - 简而言之，jackJoe 的意思是，如果您使用每个浏览器都支持的像素和字体（后者在技术上仍然不可能，即使使用所谓的“网络安全”字体)，您无法修复差异。简而言之，每个浏览器的外观都会有所不同，对于某些事情，您无能为力。这不是纸上设计，不应该被这样对待。最好接受或至少考虑到无法改变的差异。否则，你会发疯地试图让每个可以想象的浏览器中的所有内容都相同。

@Shauna 我说使用像素 + 普通 字体，通常可以跨浏览器工作。 OP 尚未回复确认他/她是否正在使用此组合。它可能看起来不同，但存在一定程度的差异，我认为下一步是@Wex 发布一些代码，然后我们可以对其进行测试并查看这些差异。

@jackJoe - 不过，即使使用“普通”或“网络安全”字体，并非每个平台的每个浏览器看起来都相同 (webspaceworks.com/resources/fonts-web-typography/41)。我的观点是，这应该是需要考虑的问题，因为在我看来，提问者正在尝试改变一些即使在最好/最可靠的情况下充其量也会有一些差异的东西。不过，就像你说的那样，我们只是在猜测，直到他给我们更多信息才能继续。

【参考方案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% 而不是没有，字体保持不变 移动设备上的正确尺寸，但可以 仍然可以在桌面上放大。

【讨论】：

感谢您提供的非常丰富的答案。我会测试一下，然后告诉你我看到了什么。

这只会引发我对“有效”CSS 的下一个关注。我仍然有兴趣查看是否有不需要浏览器特定 CSS 的修复。

@Wex：你有机会尝试这个吗？关于“有效”的 CSS - CSS 是“有效的”，在每个重要的意义上。 This is a "feature" 特定于一种浏览器（Mobile Safari），因此您自然需要“特定于浏览器的 CSS”。我看不出有什么办法..