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

Question

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

Answer 1

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

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

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

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

编辑:用户 612626提供的更好的解决方案是使用而不是.100%none