logo标签列表

当iPhone从竖屏切换到横屏时，保留HTML字体大小

iphonehtmlcss
225

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

9个回答
481
您可以通过 CSS 属性 -webkit-text-size-adjust 来禁用此行为:
html {
    -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
}

这个属性的使用方法在Safari网页内容指南中有更详细的说明。

4
正如 snobojohan 所指出的，您可以将此内容包装在针对横屏的媒体查询中，以保留在桌面浏览器上增大字体大小的能力。这在针对 iOS 的页面上并非必需，因为无论如何都可以使用捏合缩放功能。 - Matt Stevens
16
不要使用“none”，改用“100%”代替，这才是你想要的行为：http://blog.55minutes.com/2012/04/iphone-text-resizing/ - fregante
2
谢谢你分享这个信息...我一直在试图弄清楚横向排版的字体大小发生了什么xD - Jeff Shaver
3
@bfred.it +1，我认为修改这个答案并做出那个更改是值得的。 - Ming
2
近十年过去了，这个答案仍然防止自残。谢谢！ - MysterFitz
显示剩余8条评论
115
注意：如果您使用的是
html {
    -webkit-text-size-adjust: none;
}

如果这样做，将会禁用默认浏览器中的缩放行为。更好的解决方案是:

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

这样可以修正 iPhone/iPad 的行为，而不影响桌面设备的行为。

27

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

@media only screen and (min-device-width : 320px) and (max-device-width : 1024px) {
     html {
        -webkit-text-size-adjust: none;
     }
}
有趣的是，我只能通过将-webkit属性放在媒体查询内部才使其正常工作。谢谢！ - zuallauz
14

如前所述，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来关闭捏合缩放功能，这样您的网站就会像本地应用程序一样运行。如果用户缩放时设计出现问题，请改用此元标记：

您也可以添加，user-scalable=0来关闭捏合缩放功能，这样您的网站就会像本地应用程序一样运行。如果用户缩放时设计出现问题，请改用此元标记：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
好吧，一个很好的问题是在这个元标记中使用逗号还是分号分隔符！但它能正常工作 :) - Dan
2
我只需要 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 就可以让它生效。 - Foxinni
1
@Foxinni：谢谢，已更新答案。我认为这两个第一元标记是早期iOS版本中废弃的垃圾。 - Dan
11

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

9
您可以在HTML头部添加一个meta标签： <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> 这个标签可以让页面自适应不同设备的屏幕大小，同时禁用用户对页面进行缩放。
7
3
以下代码对我有效。
html{-webkit-text-size-adjust: 100%;}

如果无法正常工作，尝试清除浏览器缓存。
0
在我的情况下，这个问题是因为我在HTML标签中使用了CSS属性。我将的值改为60%，并添加。
input {
    padding-right: 38%;
    width: 60%;
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接