Question

我目前正在开发一个网站的移动版本，一切都很棒，可以在iPhone，Blackberry和Android上正常使用。

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

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

现在，当以纵向观看时，iPhone上的一切看起来都很棒，但是当设备旋转到横向时，<h1>标题会变小（难以分辨，但可能小于<h2>标签？！< / p>

这是我的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

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

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

Answer 2

更好的解决方案可以使用100％而不是none，如旧版线程中user612626所述： Font size rendering inconsistencies on an iPhone

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

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

希望它有所帮助。

Answer 3

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

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

如，

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

iPhone的字体大小问题

3 个答案: