Question

我有一个移动网络应用程序，其中包含多个列表项目的无序列表，每个列表中都有一个超链接：

...我的问题是如何格式化超链接，以便在iPhone上查看时不会改变大小，并且accellerometer从纵向切换 - ＆gt;景观？现在，我的超链接字体大小规格为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-adjust CSS属性禁用此行为：

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

Safari Web Content Guide中进一步描述了此属性的使用。

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的供应商特定规则。

有关不同浏览器中实施的最新信息，请参阅the MDN reference page。

Answer 7

以下代码适合我。

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

如果浏览器缓存不起作用，请尝试清除它。

Answer 8

就我而言，这个问题一直是因为我对HTML标记width: 100%使用了CSS属性input type="text"。

我将width的值更改为60％并添加padding-right:38%。

input {
    padding-right: 38%;
    width: 60%;
}

Answer 9

截至2019年3月，text-size-adjust拥有a reasonable support amongst mobile browsers。

body {
  text-size-adjust: none;
}

使用viewport元标记对文本大小调整和设置user-scalable: no does not even work in IOS Safari无效。

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

9 个答案: