css - モバイルクロムでフォントブースティングを無効にする方法

Question

モバイルクロムでフォントブースティングを無効にすることはできますか? 〜stackoverflowを含む〜の前にインターネットを検索しました。

無理だという人もいるし、メタタグを見つけたところ、テキストは助かったものの、テキストの面積が減ってしまった…これは良くない..

あなたの助けに感謝します..

Answer 1

私のreset.cssに次の行を追加するとうまくいきました

    html * {max-height:1000000px;}

Answer 2

それを機能させる方法を持っている人がいくつかいるようです。

いくつかの CSSルールを追加するか、親要素に width と height を指定します。

Answer 3

Matt と Kundan Sankhe の回答が現時点での最善の解決策です。

.element { max-height: 999999px; }

それでも問題が発生する場合は、head タグ内にこれを追加してみてください:-

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

ただし、これはイメージ タグまたはイメージの背景サイズ タグに問題を引き起こす可能性があることに注意してください。

Answer 4

これは Webkit 公式のバグです。Webkit公式サイトで確認できます

不要な要素をターゲットにするのではなく、フォント ブースティングをオーバーライドする必要がある特定の要素のみをターゲットにする必要があります。すなわち

p {
   max-height: 999999px;
}

Answer 5

Android Chrome は、動的な高さを持つ要素にのみフォント ブースティングを適用します。height、max-height、またはline-heightを指定するとすぐに、フォント ブースティングは適用されません。spanただし、height プロパティや max-height プロパティが無効なインライン要素には注意が必要です。その場合inline-block、以下のコードまたは高さを設定できる他のボックスタイプとして表示を設定できます。
span { font-size:12px; line-height:12px; display:inline-block; }

Answer 6

デスクトップ、およびおそらくモバイル (モバイルをテストしていない) の場合、HTML 要素に基本フォント サイズを設定することで、Chrome と FF でフォント サイズのブーストを無効にすることができます。例えば：

html {
  font-size: 16px;
}

これは、max-height よりもハッキーではありません。しかし、アクセシビリティの観点からはまだ汚れています。

必要に応じて、jQuery を使用してこれを設定することもできます。