iPhoneの向きが縦向きから横向きに変わったときにHTMLフォントサイズを保持する

私は、各li内にハイパーリンクを含む複数のリストアイテムを含む順不同リストのモバイルWebアプリケーションを持っています。

...私の質問は、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-adjustCSSプロパティを使用します。

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

このプロパティの使用については、「Safari Webコンテンツガイド」で詳しく説明しています。

注：使用する場合

html {
    -webkit-text-size-adjust: none;
}

これにより、デフォルトのブラウザでのズーム動作が無効になります。より良い解決策は：

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

これにより、デスクトップの動作を変更することなく、iPhone / iPadの動作が修正されます。

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

前述したように、CSSルール

 -webkit-text-size-adjust: none

最近のデバイスでは動作しません。

さいわい、iOS5とiOS6に新しいソリューションが追加されました（ ToDo ：iOS7はどうですか？）：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

追加, user-scalable=0してピンチズームをオフにすることもできます。これにより、Webサイトはネイティブアプリのように動作します。ユーザーがズームしたときにデザインが機能しなくなった場合は、代わりに次のメタタグを使用してください。

<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;" />

crazygringoが推奨するのと同じルールが含まれているnormalize.cssなどのCSSリセットの使用を選択することもできます。

/**
 * 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%;}

動作しない場合は、ブラウザのキャッシュをクリアしてみてください。

2019年3月の時点で、text-size-adjustはモバイルブラウザー間で適切にサポートされています。

body {
  text-size-adjust: none;
}

viewportメタタグを使用しても、テキストサイズの調整には影響がなく、設定user-scalable: no はIOS Safariでも機能しません。

私の場合、この問題はwidth: 100%、HTMLタグにCSS属性を使用したことが原因input type="text"です。

の値widthを60％に変更して追加しpadding-right:38%ます。

input {
    padding-right: 38%;
    width: 60%;
}