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

我有一个移动Web应用程序,它的无序列表包含多个列表项,每个li内都有一个超链接:


...我的问题是如何设置超链接的格式,以使它们在iPhone上查看时不会改变大小,并且加速计从纵向切换为横向?现在,我已将超链接字体大小指定为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>


慕的地8271018
浏览 385回答 3
3回答

慕的地6264312

您可以通过-webkit-text-size-adjustCSS属性禁用此行为:html {&nbsp; &nbsp; -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */}Safari Web内容指南中进一步描述了此属性的使用。

眼眸繁星

注意:如果您使用html {&nbsp; &nbsp; -webkit-text-size-adjust: none;}那么这将禁用默认浏览器中的缩放行为。更好的解决方案是:html {&nbsp; &nbsp; -webkit-text-size-adjust: 100%;}这将纠正iPhone / iPad的行为,而不更改桌面的行为。

慕工程0101907

使用-webkit-text-size-adjust:无;直接在html上中断了在所有Webkit浏览器中缩放文本的能力。您应该将其与特定于iOS的som媒体查询结合使用。例如:@media only screen and (min-device-width : 320px) and (max-device-width : 1024px) {&nbsp; &nbsp; &nbsp;html {&nbsp; &nbsp; &nbsp; &nbsp; -webkit-text-size-adjust: none;&nbsp; &nbsp; &nbsp;}}
打开App,查看更多内容
随时随地看视频慕课网APP