iPhone的字体大小问题

Question

我目前正在开发一个网站的移动版本,一切都很棒,在iPhone,黑莓和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

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

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

Answer 2

一个更好的解决方案可以使用100%而不是无,正如用户612626在旧线程中所述: iPhone上的字体大小呈现不一致

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

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

希望能帮助到你.

Answer 3

正如Neurofluxation的回答所述,你可以使用css规则-webkit-text-size-adjust,但要注意这可以防止用户调整桌面Webkit上的字体大小(有关更多详细信息,请参阅此文章).

鉴于此,可能值得通过CSS3媒体查询(或用户代理)进行检查以确保安全.

例如,

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