1. ホーム
  2. iphone

[解決済み】iPhoneの向きが縦から横に変わってもHTMLのフォントサイズは維持されます。

2022-04-09 11:35:02

質問

モバイルWebアプリケーションで、複数の項目を含む順序なしリストがあり、各項目の中にハイパーリンクがあります。 li :

私の質問は、iPhoneで見て、加速度センサーが縦から横に切り替わったときに、ハイパーリンクのサイズが変わらないようにするには、どのようにフォーマットすればよいでしょうか?

ポートレートモードでは、ハイパーリンクのフォントサイズを 14px しかし、デバイスをランドスケープに切り替えたとき、その値は 20px .

font-sizeはそのままにしてほしい。

以下はコード例です。

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ウェブコンテンツガイド .