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

Question

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

Answer 1

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

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

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

此问题仅在现代浏览器中出现，例如safari，带有iPhone设备的opera。 解决方案是

使用 -webkit-text-size-adjust：100％附加此样式;或-webkit-text-size-adjust：none ;有必要的类，它工作正常。 例： 我希望仅在请求来自移动设备时才应用条件。所以我添加了完整满足我要求的完整导航路径。

.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

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

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

编辑： 由A better solution提供的user612626将使用100%代替none。

Answer 4

我修复了同样的问题：

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

来自HTML5Boilerplate目前是here

Answer 5

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

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

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

Answer 6

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

这是我想要实现的目标：我希望我的段落适合屏幕的宽度（375像素），以使其不跳过一行，并且不留空白文字周围的空格。

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

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

...但是从来没有达到我期望的完美结果，甚至还不算不错。但是，当我将左侧填充和右侧填充减少1个像素时，问题就会消失。

我使用了-webkit-text-size-adjust: 100%;和其他解决方案，但是对我有用的是上述说明。您可以在下面的图像中看到（文本模糊，但您有主意），现在所有空间都已使用并按预期工作。因此，即使您不顾一切，也可以尝试一下此解决方案，即使那不是理想的解决方法。