iPhone上的字体大小呈现不一致

Posted 2023-02-21

【中文标题】iPhone上的字体大小呈现不一致

【英文标题】：Font size rendering inconsistencies on an iPhone

【发布时间】：2011-02-02 11:37:52

【问题描述】：

我正在测试我的网站，并且在所有浏览器上都运行良好，除了 iphone 浏览器（我认为它是移动版 Safari？），它会以比其他浏览器更大的字体呈现一段文本。我已经手动检查了 CSS 并在页面上使用了萤火虫，我可以确认我已经为所有这些设置了相同的大小。我该如何解决这个问题？

【问题讨论】：

user612626 的答案应该是公认的答案（在撰写本文时有 144 票）

这个答案在我写这个问题的时候并不存在，我使用了标记的答案。那是 7 年前 :)

【参考方案1】：

Mobile Safari 确实会尝试调整内容，使其默认在屏幕上可读 - 它与其他浏览器具有不同的默认样式。

我不知道确切的规则 - 但说到字体大小，它似乎是这样工作的：

段落、列表项或其他“文本”元素中的文本：无需调整即可应用作者的样式。

DIV 或其他非特定元素中的文本：视为“纯文本”并根据 Mobile Safari 的规则“调整”大小。

所以 - 简短的回答是，将您的文本包装在一个段落中，然后对其应用字体大小规则。

这是一个快速而肮脏的例子：

<!-- Recommended: Put this in an external stylesheet -->
<style type="text/css">
    p  font-size:10px; 
</style>

<div class="appro_body">
  <p>SAN BENEDETTO - Si è ufficialmente aperta la campagna elettorale per le 
    comunali di San Benedetto del Tronto 2011. Le elezioni regionali, oramai
    dietro le spalle, sembra siano servite più che per organizzare il 
    territorio in crisi, per muovere le pedine in vista delle elezioni a 
    Sindaco.
    ...
    <a href="http://www.ilsegnale.it/it/news/approfondimento/1602/?tpl=502">Leggi tutto...</a>
  </p>
</div>

（显然，您应该将font-size 规则移动到 CSS 文件中）。

【参考方案2】：

给身体font-size:100%, 然后使用“em”方法为您网站中的每个元素指定字体大小。

这将使相应浏览器的默认字体大小100%。 例如 iPhone safari 浏览器有 12px = 1em （当然你需要在本地检查默认字体大小）。 然后如果你想有 10px 字体大小，只需将它除以 12，即“0.83em”

希望你理解，也搜索“css em unit”你会得到更好的洞察。

【讨论】：

是否有关于12px = 1em 位的文档？我一直在试图弄清楚为什么 ios 不能按预期使用基于 em 的媒体查询。如果这是正确的，那就是原因。

【参考方案3】：

在你的 CSS 中加入这样的规则，你的问题就消失了：

body 
    -webkit-text-size-adjust: none;

编辑： A better solution，由user612626提供，就是用100%代替none。

【讨论】：

不过应该​​小心使用这种方法。已经发现，当使用放大/缩小功能时，它可以防止在所有基于 Webkit 的浏览器上调整文本大小。因此它会阻止任何放大网页文本的可能性。

【参考方案4】：

为了稍微改进 Lukasz 的想法，请尝试在您的 CSS 中使用以下规则：

body 
    -webkit-text-size-adjust: 100%;

使用值 '100%' 而不是 'none'，允许所有其他基于 Webkit 的浏览器在使用缩放功能时仍调整文本大小，同时仍保留原始字体大小。

此问题仅在现代浏览器中出现，例如 safari、带有 iPhone 设备的歌剧。 解决办法是

使用 -webkit-text-size-adjust: 100% 附加此样式；或 -webkit-text-size-adjust: 无;使用所需的课程，它可以正常工作。 例子： 我希望仅在请求来自移动设备时应用该条件。所以我附加了完全满足我要求的完整导航路径。

.mobile-phone .authenticated-page.authenticated.mobile-community.mobile-document .notification .notification-dialog.content-frame 

    -webkit-text-size-adjust: none;

或

.mobile-phone .authenticated-page.authenticated.mobile-community.mobile-document .notification .notification-dialog.content-frame 
-webkit-text-size-adjust: 100%;

两者都可以正常工作。无需为完整的正文应用样式

【讨论】：

这是正确的答案。我类似 -webkit-text-size-adjust: none;

适用于 iPhone 4s、iPhone 5 和 iPhone 5C

我真的以为我在查看检查器并看到字体大小根据内容的宽度在各处跳跃时失去理智，甚至不尊重内联 !important 规则，即使使用元视口手动设置为固定且受约束的比例。

哦，快！我的整个职业生涯都是谎言！这改变了一切

经过几个小时的调试，终于找到了这个答案。它工作正常！

【参考方案5】：

我用以下方法解决了同样的问题：

<meta name="viewport" content="width=device-width">

来自html5Boilerplate，目前是here

【讨论】：

第二个链接在 2018 年似乎坏了，但第一个链接仍然有效，建议很有帮助。

在比较 iPhone 5 和一加 5 时，这对我使用 React Native 中的 WebView 很有用

【参考方案6】：

对我来说，其他解决方案不起作用。奇怪的是，我发现的唯一解决方案是将段落容器的宽度增加 2 个像素（通过将左右填充减少 1 个像素）。

这是我试图实现的目标：我希望我的段落适合屏幕的宽度（375px），这样它就不会跳过一行，也不会留下空白文本周围的空间。

我尝试了字体大小从 1.12em 到 1.20em 的所有组合，它会：

在文本周围留出重要的可用空间 跳过一行

...但从来都不是我所期望的完美结果，甚至不是像样的。但是当我将左边的填充和右边的填充减少 1 个像素时，问题就会消失。

我使用了-webkit-text-size-adjust: 100%; 和其他解决方案，但对我有用的是上面的解释。您可以在下面的图像中看到（文本模糊，但您明白了）现在所有空间都已使用并按预期工作。所以，如果你绝望了，试试这个解决方案，即使这不是一个理想的解决方案。