どうやら、テキストの段落が特定の長さに達すると、Android上のGoogle Chromeは、テキストのサイズを変更して大きくすることを決定します(あらゆる種類の楽しみを引き起こします)。これで、p
タグの約半分が設定したサイズに従い、残りの半分が段落の長さに応じて自由に変更されるWebサイトができました。
一体どうやってこれを修正するのですか?
回答:
max-height: 999999px;
フォントのブーストを防止する要素、またはその親に追加します。
div
要素がページの上部にぎこちなく折りたたまれていました。最大高さの定義でサイトを「覆い隠す」ことはしないでください。必要な場合にのみ使用し、徹底的にテストしてください。
min-height: 1px
ていませんが、残念ながら効果はありませんでした。max-height: 999999px
しかし、トリックを行います。私の場合は、ルートの開始/終了中に非常に長いコンテンツが移行していました。フォントのブーストは、移行中または移行直後に発生しましたが、どちらかはわかりませんが、非常に顕著な変化を引き起こしました。
<meta>
ドキュメントに次のタグを含めます<head>
。
<meta name="viewport" content="width=device-width, initial-scale=1">
これにより、ビューフレームが正しく確立されるため、「FontBoosting」が不要になります。
<meta name="viewport" content="width=device-width, initial-scale=0.5, user-scalable=no">
Chromeを使用していますが、まだChromeのスケーリングがひどいです
これを制御するために設定できるCSSプロパティがあります。
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjustを参照してください
これをリセットします。 html * {max-height:1000000px;}
*
アプローチを使用する必要がありました。とはいえ、これはあなたが忘れてしまい、将来的に問題を引き起こす可能性のあるあいまいなものの1つであると私は主張します。したがって、保守性のために、当時は1つだけだった*
としてもおそらくそのままにしておきました。いくつかの要素。
* max-height...
私のコードにはLOLがあります
いくつかのテストの後、このルールは私を助けてくれました。div / table構造に応じて、ブーストされたテキストを含む要素またはその親のいずれかに追加する必要があります。
element or parent element {
/* prevent font boosting on mobile devices */
width: 100%;
height: auto;
min-height: 1px;
max-height: 999999px;
}
必要に応じて、幅と高さの値を修正する必要があるかもしれません。
私は自分のページの解決策を見つけました:親要素に幅と高さを与えてください!フォントはこれらの境界線の外側に出ないため、小さいままになります。