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

- Ryano

---

可能是保持iPhone从纵向到横向方向变化时HTML字体大小不变的重复问题。 - Blazemonger

Answer 1

我相信你在寻找的是以下的CSS代码:

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

- Barrie Reader

---

完美运行！谢谢，我会尽快将答案标记为正确的！ - Ryano

经过数小时的游戏，你救了我的命！谢谢@Neurofluxation。 - dvlden

相信我，当我发现这件事时，我的下巴掉了下来，开始出汗，心脏也跳了一拍……但实际上我只是大喊了一声“F*CK YEAH”。 - Barrie Reader

但是为什么“span”标签在旋转时会调整文本大小，而“a”标签不会呢？ - Dmitry

谢谢，伙计！CSS 真是太棒了，你也一样！！ - Swastik Pareek

Answer 2

更好的解决方案是使用100％而不是none，正如用户612626在旧帖子中所述：
Font size rendering inconsistencies on an iPhone。

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

这样桌面WebKit浏览器也可以按比例调整大小和缩放。我认为这比通过屏幕尺寸进行过滤更好。希望有所帮助。

- Cazuma Nii Cavalcanti

Answer 3

正如Neurofluxation的答案中所述，您可以使用CSS规则-webkit-text-size-adjust，但请注意，这可能会阻止用户在桌面Webkit上调整字体大小（有关详细信息，请参见此文章）。

鉴于此，为了安全起见，最好通过CSS3媒体查询（或用户代理）进行检查。

例如，

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

- AlexD