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

我有一个移动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>

您可以通过-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：无；直接在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的新解决方案来了（要做：iOS7呢？）：

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

您还可以添加, user-scalable=0关闭捏缩放功能，这样您的网站就可以像本地应用一样运行。如果您的设计在用户缩放时停止，请改用以下meta标签：

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

您可以在HTML标头中添加一个meta：

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

您还可以选择使用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参考页。

下面的代码对我有用。

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

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

截至2019年3月，text-size-adjust 在移动浏览器中已获得合理支持。

body {
  text-size-adjust: none;
}

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

就我而言，这是因为我将CSS属性width: 100%用于HTML标签input type="text"。

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

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