iPhone 上的字体大小渲染不一致

Question

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

Answer 1

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

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

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

此问题仅在 iPhone 设备上的 safari、opera 等现代浏览器中出现。
解决方案是

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

.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%;

}
两者都会工作得很好。无需应用全身样式

Answer 2

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 文件）。

Answer 3

我修复了同样的问题：

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

从 HTML5Boilerplate 目前它是 此处

Answer 4

将这样的规则放入您的 CSS 中，您的问题就消失了：

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

编辑：
更好的解决方案，由user612626，就是使用100%而不是none。

Answer 5

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

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

我希望你理解，同时搜索“css emunit”你会得到更好的洞察。

Answer 6

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

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

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

1. 在文本周围留下重要的自由空间，
2. 跳过一行

...但从来没有达到我预期的完美结果，甚至没有接近体面的。但当我将左内边距和右内边距减少 1 个像素时，问题就消失了。

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