フロントエンドスキル：GoogleChromeのフォントブースト[テキストオートサイザー]

Xiaoqianが今日紹介した問題、Google Chromeのフォントブースト[TextAutosizer]など、フロントエンドを開発するときに、誰もが説明できない問題に遭遇することがよくあります。

問題

携帯端末のデモはGoogle Chromeのの開発者とテストされたテキストのサイズは、ブラウザに表示され、コード内のサイズのセットは非常に異なっている具体的なコードは、以下のようにされています。

次のような効果がある：

によると、上記のコード設定、pタグのテキストサイズは20pxですが、上のスクリーンショットからわかるように、ブラウザのpタグによって表示されるテキストサイズは34pxです。設定されたテキスト値よりもはるかに悪いのはなぜですかコードで？
確認したところ、これはウェブキットがモバイルブラウザに提供するテキストオートサイザー機能の機能であり、フォントブースト-フォントブースト、フォントインフレーション-フォントインフレーションとも呼ばれます。この機能の機能は、モバイルでウェブページを閲覧することです。場合によっては、元のページ幅が大きすぎて、携帯電話の画面をズームアウトした後、その中のテキストが明確にならない可能性があります。フォントブースト機能は、この時点でテキストを自動的に拡大し、ユーザーがページ上のテキストを簡単に読むことができるようにします。

テキストオートサイザー機能をトリガーするものは何ですか？

（1）デフォルトのビューポート980の場合、ページは画面に縮小されたサイズで表示され、テキストが多い場合はテキストオートサイザーがトリガー
されます。以下に示すように、ビューポートのサイズは設定されていません。 、ビューポートはデフォルトの980pxです。pラベルはコードに従って設定され、テキストサイズは20pxですが、ブラウザに表示されるサイズは45.8886pxです。

（2）ビューポートに設定ページを表示すると、が縮小され、さらにテキストがある場合は、テキストオートサイザーがトリガー
されます。以下に示すように、最初に表示されたときにページが0.5に縮小されるように設定します。pタグはコードに従って設定されます。テキストサイズは20pxです。 、ただしブラウザに表示されるサイズは34pxです。

上記の条件が存在するが、テキストの量が多くない場合、この問題は発生しません。、ご承知おきください。

この問題を解決する方法は？

この時点での前任者と私自身の要約の後、次の解決策を要約しました。
（1）この問題が発生したラベルの高さを次のように
設定します。ページが縮小するように設定され、テキストの量が縮小されない変更しますが、pを追加します。高さ：100％、pによって表示されるテキストサイズは20pxになります

（2）この問題が発生するラベルに次のようにmax-heightを設定します。

ページが縮小するように設定され、テキストの量は変更されていませんが、max-height：300pxがpに追加され、pによって表示されるテキストサイズは20pxになりました。

上記の共有はすべての人に役立つことを願っています。より多くのフロントエンドスキルを知りたい、私に従ってください！