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

Question

我有一个移动Web应用程序，它的无序列表包含多个列表项，每个li内都有一个超链接：...我的问题是如何设置超链接的格式，以使它们在iPhone上查看时不会改变大小，并且加速计从纵向切换为横向？现在，我已将超链接字体大小指定为14px，但是切换到横向时，它会炸裂至20px。我希望字体大小保持不变。这是代码：ul li a{  font-size:14px;  text-decoration: none;  color: #cc9999;}<ul>  <li id="home" class="active">    <a href="home.html">HOME</a>  </li>  <li id="home" class="active">    <a href="test.html">TEST</a>  </li></ul>

Answer 1

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

html {

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

}

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

Answer 2

注意：如果您使用

html {

    -webkit-text-size-adjust: none;

}

那么这将禁用默认浏览器中的缩放行为。更好的解决方案是：

html {

    -webkit-text-size-adjust: 100%;

}

这将纠正iPhone / iPad的行为，而不更改桌面的行为。

Answer 3

使用-webkit-text-size-adjust：无；直接在html上中断了在所有Webkit浏览器中缩放文本的能力。您应该将其与特定于iOS的som媒体查询结合使用。例如：

@media only screen and (min-device-width : 320px) and (max-device-width : 1024px) {

     html {

        -webkit-text-size-adjust: none;

     }

}