我有一个移动web应用程序，包含多个项目的无序列表，每个li内有一个超链接:
我的问题是:如何设置超链接的格式，使它们在iPhone上浏览时不改变大小，并且加速计从纵向切换到横向?
在竖屏模式下，我将超链接的字体大小设置为14px，但当我将设备切换到横屏模式时，它会膨胀到20px。
我希望字体大小保持不变。
下面是示例代码:
乌利阿 { 字体大小：14px; 文字装饰：无; 颜色： #cc9999; } <ul> < id=“home” class=“active”> <a href=“home.html”>HOME</a> </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头中添加meta:
<meta name="viewport" content="width=device-width;初始= 1.0;最大范围= 1.0;user-scalable = 0;“/>
使用-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;
}
}
注意事项:如果使用
html {
-webkit-text-size-adjust: none;
}
这将禁用默认浏览器中的缩放行为。更好的解决方案是:
html {
-webkit-text-size-adjust: 100%;
}
这纠正了iPhone/iPad的行为，而不改变桌面行为。
正如前面提到的，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来关闭缩放，这样你的网站就会像一个原生应用程序一样。如果你的设计在用户缩放时刹车，使用这个元标签:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
在我的情况下，这个麻烦是因为我使用CSS属性宽度:100% HTML标签输入类型=“文本”。
我将width的值改为60%，并添加padding-right:38%。
input {
padding-right: 38%;
width: 60%;
}
你也可以选择使用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参考页面。
截至2019年3月，文本大小调整在移动浏览器中得到了合理的支持。
body {
text-size-adjust: none;
}
使用viewport元标签对文本大小调整和设置user-scalable没有影响:no甚至在IOS Safari中也不起作用。
