Android上のChromeはフォントのサイズを変更します


84

どうやら、テキストの段落が特定の長さに達すると、Android上のGoogle Chromeは、テキストのサイズを変更して大きくすることを決定します(あらゆる種類の楽しみを引き起こします)。これで、pタグの約半分が設定したサイズに従い、残りの半分が段落の長さに応じて自由に変更されるWebサイトができました。

一体どうやってこれを修正するのですか?


1
例はありますか?また、AndroidとChromeのどのバージョンですか?
Junuxx 2012

回答:


93

max-height: 999999px;フォントのブーストを防止する要素、またはその親に追加します。


13
Android Chromeは、動的な高さの要素にのみフォントブーストを適用します。高さまたは最大高さを指定するとすぐに、フォントブースティングは適用されません。max-heightを大きな数値に設定するのは簡単で、副作用はありません。
moeffju 2013年

1
これに対する単なる警告。これにより、AndroidのChromeフォントがうまく再生されないという問題が解決しました。しかし、それは特定のバージョンのiosでサイトのipadビューを壊しました。
ジェームズ・マクドネル

また、css3トランジションのiPadでいくつかの問題が発生しました。
ジェームズ・マクドネル

4
これを使用すると、最初から最大高さまたは定義された高さを使用していなくても、Safari(5.1.7)の多くの要素のレイアウトが大幅に壊れます。いくつかのサイトは完全に使用できず、すべての構造div要素がページの上部にぎこちなく折りたたまれていました。最大高さの定義でサイトを「覆い隠す」ことはしないでください。必要な場合にのみ使用し、徹底的にテストしてください。
Radley Sustaire 2014年

2
Whelp ...私がそれをすべて見たと思ったちょうどその時...別のクレイジーな修正を伴う別のクレイジーなグリッチ。FWIW Safariで問題は発生しmin-height: 1pxていませんが、残念ながら効果はありませんでした。max-height: 999999pxしかし、トリックを行います。私の場合は、ルートの開始/終了中に非常に長いコンテンツが移行していました。フォントのブーストは、移行中または移行直後に発生しましたが、どちらかはわかりませんが、非常に顕著な変化を引き起こしました。
追跡

60

<meta>ドキュメントに次のタグを含めます<head>

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

これにより、ビューフレームが正しく確立されるため、「FontBoosting」が不要になります。


6
これは間違いなく推奨されるソリューションです。モバイルでの外観が気になる場合は、ビューポートの所有権を取得してください。
ポールアイリッシュ

17
ただし、これによってフォントのブーストが無効になることはありません。
Ed Hinchliffe 2013年

1
それは確かに不要なスケーリングを修正し、私は将来それを使用するつもりです。
ディズリー2013年

5
注として、私は<meta name="viewport" content="width=device-width, initial-scale=0.5, user-scalable=no">Chromeを使用していますが、まだChromeのスケーリングがひどいです
Sam

フォントが読みやすいので、それはより良いです。読みやすさのためにサイズを大きくしながら、プロポーションを維持しています。私にぴったりです。
ジェニファーミシェル

23

これを制御するために設定できる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を参照してください


text-size-adjust:最新のAndroidChromeでは何も機能しませんでした。
Stepan Yakovenko 2017

これは、Webアプリとしてデプロイされたガスを使用している場合に推奨されるソリューションです。
JPP

これは私には機能しませんが、max-heightは機能します。
Radenko Zec

15

これをリセットします。 html * {max-height:1000000px;}


スティッキーフッターで問題が発生し、代わりにhtml body *を実行する必要がありました
Sabrina Leggett 2016年

多くの予測できない要素で実際に問題が発生していない限り、これは少し攻撃的すぎます。それ以外の場合は、問題のある要素のみをターゲットにすることをお勧めします。
追跡

1
@ Chase-私の場合、それらは予測不可能な(動的な)要素だったので、*アプローチを使用する必要がありました。とはいえ、これはあなたが忘れてしまい、将来的に問題を引き起こす可能性のあるあいまいなものの1つであると私は主張します。したがって、保守性のために、当時は1つだけだっ*としてもおそらくそのままにしておきました。いくつかの要素。
Ed Hinchliffe 2018年

このスレッドを見つけてコメントした直後に、フォントのブーストに関連していると思われる追加の問題が発生し始めました。だから、確かに(少なくとも今のところ)* max-height...私のコードにはLOLがあります
チェイス

6

いくつかのテストの後、このルールは私を助けてくれました。div / table構造に応じて、ブーストされたテキストを含む要素またはその親のいずれかに追加する必要があります。

element or parent element { 
    /* prevent font boosting on mobile devices */
    width: 100%;
    height: auto;
    min-height: 1px;
    max-height: 999999px;
}

必要に応じて、幅と高さの値を修正する必要があるかもしれません。


2

私は自分のページの解決策を見つけました:親要素に幅と高さを与えてください!フォントはこれらの境界線の外側に出ないため、小さいままになります。


1

これは「フォントブースティング」と呼ばれ、このWebKitバグで詳細に説明されています。現在、それを無効にする方法はありません。


確かにフォントブーストのように見えますがmax-height: 999999px、@ moeffjuで説明されているように設定することで防ぐことができます。
追跡
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.