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

我正在testing我的网站,并在除了iphone浏览器(我认为它是移动Safari?),每个浏览器工作正常,其中一个文本与一个更大的字体,其余的。 我已经检查了CSS的手和使用页面上的萤火虫,我可以证实我已经把所有的相同的大小。 我该如何解决?

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

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

如果使用值“100%”而不是“无”,则允许所有其他基于Webkit的浏览器在使用缩放function时调整文本大小,同时仍保留原始字体大小。

Mobile Safari会尝试修改内容,以便在默认情况下在屏幕上可读 – 它与其他浏览器有不同的默认样式。

我不知道确切的规则 – 但是在字体大小方面,它似乎是这样工作的:

  • 段落内的文本,列表项目或其他“文本”元素:应用作者的样式而不适应。

  • DIV文件或其他非特定元素中的文本按照Mobile Safari的规则视为“纯文本”和“调整”大小。

所以 – 简短的答案是,将文本包装在一个段落中,并将font-size规则应用于该段落。

这是一个快速和肮脏的例子:

 <!-- 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文件中)。

把这样的规则放在你的CSS中,你的问题就不存在了:

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

编辑:更好的解决scheme,由user612626提供,是使用100%的价值,而不是没有。

我解决了这个问题:

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

目前来自HTML5Boilerplate

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

这将使各个浏览器的字体大小为默认字体大小的100% 。 例如iPhone Safari浏览器有12px = 1em(offcourse你需要检查本地的默认字体大小)。 那么如果你想要有10px的字体大小,只要把它除以12即“0.83em”

我希望你明白,也search“CSS单位”,你会得到更好的见解。