CSS iPhone 上的字体大小呈现不一致

Font size rendering inconsistencies on an iPhone

提问by Terix

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?

我正在测试我的网站，并且在每个浏览器上都运行良好，除了 iphone 浏览器（我认为它是移动版 Safari？），它用比其他浏览器更大的字体呈现一段文本。我已经手动检查了 CSS 并在页面上使用了萤火虫，我可以确认我已经为所有这些设置了相同的大小。我该如何解决？

回答by user612626

To improve on Lukasz's idea slightly, try using the following rule in your CSS:

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

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

Using the value '100%' instead of 'none', allows all other Webkit-based browsers to still resize text when using the zoom function while still preserving your original font size.

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

This issue is arising only in modern browsers like safari, opera with iPhone device. Solution is

这个问题只出现在现代浏览器中，比如 safari、带有 iPhone 设备的歌剧。解决方案是

Append this style with the -webkit-text-size-adjust: 100%; or -webkit-text-size-adjust: none; with required class it works fine. Example: I want the condition to be applied only when request comes from mobile. So I have appended the complete navigation path that full fills my requirement.

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

or

或者

.mobile-phone .authenticated-page.authenticated.mobile-community.mobile-document .notification .notification-dialog.content-frame {
-webkit-text-size-adjust: 100%;

} both will work fine. No need to apply the styles for complete body

两者都可以正常工作。无需为完整的身体应用样式

回答by Ben Hull

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

Mobile Safari 确实会尝试调整内容，以便默认情况下可以在屏幕上阅读 - 它与其他浏览器具有不同的默认样式。

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.

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

• 段落、列表项或其他“文本”元素内的文本：应用作者的样式而不进行调整。

• DIV 或其他非特定元素内的文本：视为“纯文本”并根据 Mobile Safari 的规则“调整”大小。

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>

(obviously, you should move the font-sizerule to the CSS file).

（显然，您应该将font-size规则移至 CSS 文件）。

回答by Keith Smiley

I fixed this same issue with:

我用以下方法解决了同样的问题：

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

From HTML5Boilerplatecurrently it's here

从HTML5Boilerplate目前它在这里

回答by Lukasz Korzybski

Put such a rule in your CSS and your problem is gone:

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

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

EDIT: A better solution, provided by user612626, is to use 100%instead of none.

编辑： 更好的解决方案，提供user612626，是使用100%替代none。

回答by Chandrakant

Give body font-size:100%, then use "em" method to give font size to every element in your website.

提供 body font-size:100%，然后使用“em”方法为网站中的每个元素提供字体大小。

This will make the font size 100%of the default font size by respective browser. For example iPhone safari browser has 12px = 1em (offcourse you need to check the default font size locally). Then if you want to have 10px font size, just divide it by 12, i.e "0.83em"

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

I hope you understand, also search for "css em unit" you will get better insight.

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

回答by Max

For me the other solution didn't work. Oddly enough, the only solution I found was to increase the width of my paragraph container by 2 pixels (by diminihsing the left and right padding by 1 pixel).

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

Here is what I tried to achieve:I wanted my paragraph to fit the width of the screen (375px), so that it does not skip a line, and so that it does not leave blank space around the text.

这是我试图实现的目标：我希望我的段落适合屏幕的宽度（375px），这样它就不会跳过一行，并且不会在文本周围留下空白空间。

I tried all combination with font-size from 1.12em to 1.20em, it would either:

我尝试了从 1.12em 到 1.20em 的 font-size 的所有组合，它要么：

1. leave important free space around the text
2. skip one line

1. 在文本周围留下重要的可用空间
2. 跳过一行

...but never the perfect result I expected, not even near decent. But when I reduced the padding left and padding right by 1 pixel, the problem would disappear.

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

I used -webkit-text-size-adjust: 100%;and other solutions but what worked for me was the above explanation. You can see on the image bellow (text is blurred but you get the idea) that now all space is used and working as intended. So, if you are desperate, give this solution a try even though that's not an ideal fix.

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