首页 文章

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

提问于
浏览 次
188

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

8 回答

  • 10

    以下代码适用于我 .

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

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

    回复于
  • 384

    在我的情况下，这个麻烦是因为我使用CSS属性 width: 100% 用于HTML标记 input type="text" .

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

    input {
    padding-right: 38%;
    width: 60%;
}
    回复于
  • 94

    您可以通过 -webkit-text-size-adjust CSS属性禁用此行为：

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

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

    回复于
  • 0

    注意：如果您使用

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

    然后这将禁用默认浏览器中的缩放行为 . 更好的解决方案是：

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

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

    回复于
  • 25

    使用-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;
     }
}
    回复于
  • 12

    如前所述，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">
    回复于
  • 7

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

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

    回复于
  • 2

    您也可以选择使用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 .

    回复于

相关问题