在iPhone上的字体大小不一致渲染 [英] Font size rendering inconsistencies on an iPhone

问题描述

我测试我的网站，是工作的罚款在每一个浏览器，除了iPhone的浏览器（我认为这是移动Safari浏览器？）呈现一个更大的字体，其余的一段文字。我用手检查CSS和在页面上使用萤火虫，我可以确认我已经把相同尺寸他们。我该如何解决这个问题？

I’m testing my website and is working fine on every browser, except for the iphone browser (i think it’s mobile Safari?) that renders a piece of text with a bigger font that the rest. I’ve checked the CSS by hands and using firebug on the page and I can confirm I’ve put the same size to all of them. How do I fix this?

推荐答案

移动Safari浏览器做尝试，以便它的可读性屏幕上默认情况下，以适应内容 - 它有不同的默认样式其他浏览器

Mobile Safari does try to adapt content so that it's readable on screen by default - it has different default styles to other browsers.

我不知道确切的规则 - 但是，当涉及到字体大小，看起来像这样的工作：

I don't know the exact rules - but when it comes to font sizes, it seems to work like this:

• 一个段落，列表项，或其他文本元素中文字：应用作者的风格，而不调整

• Text inside a paragraph, list item, or other 'text' element: Apply the author's style without adapting.

DIV或其他非特异性元素中文字：治疗为纯文本，并根据移动Safari浏览器的规则适应的大小

Text inside a DIV or other non-specific element: Treat as 'plain text' and 'adapt' the size according to Mobile Safari's rules.

所以 - 简单的答案是，包你的文字段落，并应用字体大小规则到

So - the short answer is, wrap your text in a paragraph, and apply the font-size rule to that.

下面是一个快速和肮脏的例子：

Here's a quick and dirty example:

<!-- 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>

（显然，你应该移动字体大小规则的CSS文件）。

这篇关于在iPhone上的字体大小不一致渲染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！