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


当前回答

正如前面提到的,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">

其他回答

使用-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头中添加meta:

<meta name="viewport" content="width=device-width;初始= 1.0;最大范围= 1.0;user-scalable = 0;“/>

下面的代码适用于我。

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

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

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

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

此属性的使用在Safari Web Content Guide中有进一步描述。

截至2019年3月,文本大小调整在移动浏览器中得到了合理的支持。

body {
  text-size-adjust: none;
}

使用viewport元标签对文本大小调整和设置user-scalable没有影响:no甚至在IOS Safari中也不起作用。