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

Question

我有一个移动的Web应用程序,其中包含多个列表项的无序列表,每个列表中都有一个超链接:

...我的问题是如何格式化超链接,以便在iPhone上查看时不会改变大小,并且accellerometer从纵向切换 - >横向？现在,我的超链接字体大小规格为14px,但是当切换到横向时,它会爆炸到20px.我希望font-size保持不变.这是代码:

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

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

Answer 4

如前所述,CSS规则

 -webkit-text-size-adjust: none

不再适用于现代设备.

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

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

您还可以添加, user-scalable=0以关闭缩放缩放,以便您的网站表现得像本机应用程序.如果您的设计在用户缩放时刹车,请改用此元标记:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

Answer 5

您可以在HTML标头中添加元数据:

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

Answer 6

您也可以选择使用CSS重置,例如normalize.css,其中包含与crazygringo建议的规则相同的规则:

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

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

如您所见,它还包括IE Phone的供应商特定规则.

有关不同浏览器中实现的最新信息,请参阅MDN参考页面.

Answer 7

截至 2019 年 3 月，文本大小调整在移动浏览器中得到了合理的支持。

body {
  text-size-adjust: none;
}

使用viewportmeta标签对文本大小调整没有影响，并且设置user-scalable: no 甚至在IOS Safari中不起作用。