当iPhone方向从纵向更改为横向时,保留HTML字体大小

您可以通过-webkit-text-size-adjustCSS属性禁用此行为:

html {
    -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
}

Safari Web内容指南中进一步描述了此属性的使用.

注意:如果您使用

html {
    -webkit-text-size-adjust: none;
}

然后这将禁用默认浏览器中的缩放行为.更好的解决方案是:

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

这可以纠正iPhone/iPad的行为,而不会改变桌面行为.

使用-webkit-text-size-adjust:none; 直接在html上打破了在所有webkit浏览器中缩放文本的能力.您应该将其与特定于iOS的som媒体查询结合使用.例如:

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

如前所述,CSS规则

 -webkit-text-size-adjust: none

不再适用于现代设备.

幸运的是,iOS5和iOS6有了新的解决方案(todo:iOS7怎么样？):

`它才能生效. 

5> 小智..：
您可以在HTML标头中添加元数据:

/**
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */

html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}