当 iPhone 方向从纵向变为横向时保留 HTML 字体大小答案

【问题标题】：Preserve HTML font-size when iPhone orientation changes from portrait to landscape当 iPhone 方向从纵向变为横向时保留 HTML 字体大小
【发布时间】：2011-02-12 05:41:44
【问题描述】：

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

【问题讨论】：

标签： iphone html css

【解决方案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 中进一步描述了此属性的使用。

【讨论】：

正如 snobojohan 所说，您可以将其包装在特定于横向的媒体查询中，以保留在桌面浏览器上增加字体大小的能力。这在 iOS 目标页面上不是必需的，无论如何捏缩放都可以工作。
此功能在 iOS6 中无法使用。您也可以尝试使用<meta content="viewport" 元标记（见下文）
不要使用none，而是使用100%，那是你想要的行为：blog.55minutes.com/2012/04/iphone-text-resizing
谢谢你...我一直在试图弄清楚横向 xD 中的字体大小发生了什么
@bfred.it +1，我认为用这个改变编辑这个答案是值得的。

【解决方案2】：

注意：如果你使用

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

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

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

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

【讨论】：

【解决方案3】：

使用 -webkit-text-size-adjust: none;直接在 html 上破坏了在所有 webkit 浏览器中缩放文本的能力。您应该将此与特定于 iOS 的一些媒体查询结合起来。例如：

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

【讨论】：

有趣的是，我只是通过将 -webkit 属性放在媒体查询中来让它工作。谢谢！

【解决方案4】：

如前所述，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 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"> 即可生效。
@Foxinni：谢谢，更新了答案。我认为这两个第一个元标记是早期 iOS 版本中已弃用的垃圾

【解决方案5】：

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

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

【讨论】：

【解决方案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 电话的供应商特定规则。

有关在不同浏览器中实现的当前信息，请参阅the MDN reference page。

【讨论】：

【解决方案7】：

下面的代码对我有用。

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

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

【讨论】：

【解决方案8】：

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

body {
  text-size-adjust: none;
}

使用viewport元标记对文字大小调整和设置user-scalable: nodoes not even work in IOS Safari没有影响。

【讨论】：

【解决方案9】：

在我的例子中，这个问题是因为我使用 CSS 属性 width: 100% 作为 HTML 标签 input type="text"。

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

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

【讨论】：