当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%; }