web-dev-qa-db-ja.com

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

私は、各li内にハイパーリンクを持つ複数のリストアイテムを含む順序付けられていないリストを持つモバイルWebアプリケーションを持っています：

...私の質問は、ハイパーリンクをフォーマットして、iPhoneで表示したときにサイズが変わらず、加速度計が縦向きから横向きに切り替わる方法を教えてください。現時点では、ハイパーリンクのフォントサイズは14ピクセルに指定されていますが、横向きに切り替えると、20ピクセルにまで膨れ上がります。フォントサイズを同じままにしておきたい。コードは次のとおりです。

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>
iphonehtmlcss
195
DShultz

-webkit-text-size-adjust CSSプロパティを使用して、この動作を無効にできます。

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

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

404
Matt Stevens

注：を使用する場合

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

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

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

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

101
crazygringo

-webkit-text-size-adjustを使用：なし;直接HTMLにすると、すべてのWebkitブラウザーでテキストをズームする機能が壊れます。これをiOS固有のsomメディアクエリと組み合わせる必要があります。例えば：

@media only screen and (min-device-width : 320px) and (max-device-width : 1024px) {
     html {
        -webkit-text-size-adjust: none;
     }
}
25
snobojohan

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

 -webkit-text-size-adjust: none

最新のデバイスでは動作しなくなりました。

幸いなことに、iOS5およびiOS6用の新しいソリューションがあります（todo：what what 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">
12
Dan

HTMLヘッダーにメタを追加できます。

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

10
Guillaume

normalize.css などの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リファレンスページ を参照してください。

8
Manu

以下のコードは私のために機能します。

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

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

2
Aman

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

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

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

2019年3月の時点で text-size-adjust には モバイルブラウザ間での合理的なサポート があります。

body {
  text-size-adjust: none;
}

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

0
Radek Matěj