字体大小在 iPhone 上呈现不同

Question

这个让我头疼。下面的 HTML/CSS 在每个浏览器上看起来都很好，当我在 iPhone 上阅读它时。 a 标签（SITE DESIGN SOME COMPANY）中的文本明显小了大约 25%。我已经浏览了 DOM，并确保没有其他样式在我的桌面上进行计算。

<footer>
COPYRIGHT 2012 / <a href="http://somesite.com">
SITE DESIGN SOME COMPANY</a> / ALL RIGHTS RESERVED
</footer>      

footer {
width: 100%;
position: absolute;
padding: 10px 0 10px 0;
left: 0px;
bottom: -50px;
text-align: center;
word-spacing: 20px;
font-size: 75%;
}

Answer 1

我也经历过。 iPhone 呈现% 字体大小与其他浏览器不同。特别是如果嵌套在具有多个 % 更改的多个元素中（例如，如果您的 <footer> 位于另一个具有另一个 75% 字体大小声明的元素内）。

如果您将 75% 更改为 0.75em（或使用百分比以外的其他值），您应该会恢复营业。

footer {
width: 100%;
position: absolute;
padding: 10px 0 10px 0;
left: 0px;
bottom: -50px;
text-align: center;
word-spacing: 20px;
font-size: 0.75em; /* or 10pt, or... */
}