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