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

我正在测试我的网站，并且在除了iPhone浏览器（我认为它是移动Safari？）之外的每个浏览器上都正常工作，它会呈现带有更大字体的文本。我已经通过手动检查了CSS并在页面上使用了萤火虫，并且我可以确认我已将相同的尺寸放到了所有的上面。我该如何解决？iPhone上的字体大小渲染不一致

来源

2010-03-30 Terix

user612626的答案应该是公认的答案（144票，在写作的时候） – 2017-02-22 13:14:21

这个答案根本不存在我写这个问题的时间，我用标记的答案。这是7年前:) – Terix 2017-03-08 20:25:52

:)我是这么认为的。但你现在可以更新你选择的接受答案 – 2017-03-13 10:40:32

155

要在卢卡斯的想法略有改善，请尝试使用在你的CSS以下规则：

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

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

来源

2011-02-11 07:23:51 user612626

真棒解决方案，谢谢 – 2012-01-11 12:01:41

这对我的iPhone 4s很好，谢谢 – ngplayground 2012-07-02 10:54:25

这是正确的答案！ – scruffian 2012-08-24 14:36:12

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

来源

2010-03-30 20:12:09 Beejamin

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

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

我希望你明白，也搜索“css em unit”，你会得到更好的洞察力。

来源

2010-10-01 13:12:20 Chandrakant

'12px = 1em'位是否有文档？我一直在试图弄清楚为什么iOS不能像预期的那样使用基于em的媒体查询。如果这是正确的，那就是原因。 – doubleJ 2013-10-23 16:50:37

把这样的规则在你的CSS，你的问题了：

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

编辑：更好的解决方案通过提供user612626，是用100％的值，而不是没有。

来源

2010-11-14 17:14:01

虽然应该小心使用这种方法。已经发现，当使用放大/缩小功能时，它可以防止在所有基于Webkit的浏览器上调整文本的大小。因此它会阻止在网页上放大文字的任何可能性。 – 2011-01-30 16:50:20

我解决了这个同样的问题有：

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

从HTML5Boilerplate目前它的here

来源

2013-04-02 17:41:08

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

回答

相关问题