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

我有一个移动Web应用程序与一个无序的列表包含多个listitems与每个李内的超链接:

…我的问题是如何格式化超链接,以便它们不会在iPhone上查看时更改大小,并且accellerometer从纵向 – >横向切换? 现在,我的超链接字体大小spec'ed为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-adjust CSS属性禁用此行为:

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

在Safari Web Content Guide中进一步描述了这个属性的用法。

注意:如果你使用

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

那么这将在默认浏览器中禁用缩放行为。 更好的解决scheme是:

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

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

使用-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; } } 

如前所述,CSS规则

  -webkit-text-size-adjust: none 

不再适用于现代设备。

幸运的是,iOS5和iOS6有一个新的解决scheme(todo:关于iOS7呢?)

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

你也可以添加, user-scalable=0来closures缩放,这样你的网站就会像原生应用一样。 如果您的devise在用户放大时会刹车,请改用此元标记:

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

您可以在HTML标题中添加元:

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

您也可以select使用CSS重置,例如normalize.css ,其中包含与crazygringobuild议的相同的规则:

 /** * 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%;} 

尝试清除浏览器caching,如果它不起作用。

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

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

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