iPhone的字体大小问题

Question

我目前正在开发网站的移动版本，一切都很好，在 iPhone、Blackberry 和 Android 上运行良好。

我有一个小问题，不是什么大问题，但还是有点烦人。我有：

<h1> 标签设置为 18px 和粗体
<h2> 标签设置为 12px 和粗体
<p> 标签设置为 12px 和正常

现在在 iPhone 上纵向查看时一切看起来都很棒，但是当设备旋转到横向时，<h1> 标题变小了（很难说，但可能比 <h2> 标签小？！

这是我的 CSS：

h1 {
 color:#FFFFFF;
 font-size:18px;
 line-height:22px;
 font-weight:bold;
 margin-top:0px;
}

h2 {
 font-size:12px;
 color:#333333;
 font-weight:bold;
 margin-bottom:-5px;
}

p {
 color:#333333;
 font-size:12px;
 line-height:18px;
 font-weight:normal;
}

Answer 1

正如 Neurofluxation 的回答中所述，您可以使用 css 规则 -webkit-text-size-adjust 但请注意，这也会阻止用户在桌面 Webkit 上调整字体大小（有关更多详细信息，请参阅this article）。

鉴于此，可能值得通过 CSS3 媒体查询（或用户代理）进行检查以确保安全。

例如，

@media only screen and (max-device-width: 480px) { 
    html {
        -webkit-text-size-adjust: none; 
    }
}

Answer 2

如 user612626 在旧线程中所述，更好的解决方案是使用 100% 而不是无： Font size rendering inconsistencies on an iPhone

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

这样桌面 webkit 浏览器也可以按比例调整大小和缩放。 我认为这比按屏幕尺寸过滤更好。

希望对你有帮助。

Answer 3

我相信你正在你的 CSS 中寻找这个：

html {
    -webkit-text-size-adjust: none; /* Prevent font scaling in landscape */
}