♉️ 🚣🏼 🗼 モバイルブラウザでのフォントブースト 🅰️ 👰🏼 🕘

モバイルブラウザーのフォントブーストとは何か、Web開発中にどのような予期しない問題が発生するか、この問題に対処する方法についてお話します。

実際の例を考えてみましょう：

例1：

display: inline-block

で新しく作成された要素がありdisplay: inline-block

。
offsetWidth

プロパティで幅を測定します。
色を変更します。
そして、突然、Google Chrome for Mobileでは、色を変更した後、要素の幅が劇的に増加し、上の2行だけで測定されたものに対応しなくなりました！
コードを表示
 <!DOCTYPE html> <html> <head> <meta http-equiv = "content-type" content = "text/html; charset=utf-8" /> <title>  Font boosting  Google Chrome for Mobile</title> <script type = "text/javascript"> window.onload = function () { var spnSpan1 = document.getElementById ("span-1"); alert ("    : "+ spnSpan1.offsetWidth +"px"); //59px spnSpan1.style.color = "red"; alert ("    : "+ spnSpan1.offsetWidth +"px"); //186px (WTF?!) } </script> </head> <body> <p> <span id = "span-1" style = "display: inline-block;"></span> </p>  <p> abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc </p> </body> </html>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
オンラインの例を参照してください。

_{（この記事の例を表示するには、Google Chrome for Mobileを使用するか、Apple iPhone 5やSamsung Galaxy Note IIなどのスマートフォンエミュレーションモードで通常のGoogle Chromeを使用してください）。}

要素の色を変更すると、 サイズが大きくなるのはなぜですか？！この奇妙な動作の理由は、正確にフォントのブーストです。

フォントブースティングとは

フォントブーストは、モバイルブラウザがフォントサイズをモバイルデバイスの解像度に合わせて調整する特別な手法です。この手法は、デスクトップブラウザー用に設計された多くのWebページに、モバイル画面の幅を超える幅のテキスト要素が含まれているために必要です。これらの要素を表示するには、訪問者は水平スクロールを使用するか、要素を画面サイズに合わせてページスケールを縮小する必要があります。ただし、ズームアウトすると、フォントサイズも小さくなり、テキストが完全に読めなくなることがあります。したがって、フォントブーストは、フォントサイズを明確に増加させるので、画面の幅にブロックを刻んだ後、このフォントサイズは、当初考えられていたサイズに対応します。

フォントブート中のフォントサイズの増加の程度は、要素の幅に依存します。要素が広くなるほど、画面に収まるように要素を強くする必要があり、したがって、この減少を補うためにフォントサイズを大きくする必要があります。

フォントブーストの問題

Google Chrome for Mobileでのフォントブースティングの実装には、Web開発での検出が困難になる可能性がある2つの機能があります。

要素のフォントブーストは、作成直後ではなく、ページの次の「リフロー」後に発生します。同様に、ページが読み込まれた後、ページを変更するスクリプトが完了した後、およびページのジオメトリにoffsetWidth

するプロパティ（たとえばoffsetWidth

にアクセスしたときに、リフローが発生します。
display: inline-block

付きの要素のフォントブーストdisplay: inline-block

は、リフローページの直後だけでなく、リフローと要素自体の一部のプロパティ （色など）の変更後にも発生します 。

例でこの機能を説明します。

例2：

4つの要素があり、最初の3つはdisplay: inline-block

するように設定されていdisplay: inline-block

、4番目はdisplay: inline-block

されません。その結果、4番目の要素のサイズは、ページを読み込んだ直後に増加し、要素1〜3では、色を変更した後にのみ増加します。
コードを表示
 <!DOCTYPE html> <html> <head> <meta http-equiv = "content-type" content = "text/html; charset=utf-8" /> <title>  Font boosting  Google Chrome for Mobile</title> <script type = "text/javascript"> window.onload = function () { /*    */ var spnSpan1 = document.getElementById ("span-1"); var spnSpan2 = document.getElementById ("span-2"); var spnSpan3 = document.getElementById ("span-3"); var btnGo = document.getElementById ("btnGo"); /*   ,      */ btnGo.onclick = function () { spnSpan1.style.color = "red"; spnSpan2.style.color = "red"; spnSpan3.style.color = "red"; } } </script> </head> <body> <div> <input type = "button" id = "btnGo" value = " !" />  <p> <span id = "span-1" style = "display: inline-block;"> 1</span> </p> <p > <span id = "span-2" style = "display: inline-block;"> 2</span> </p> <p> <span id = "span-3" style = "display: inline-block;"> 3</span> </p>  <p> <span id = "span-4"> 4</span> </p>  <p> abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc </p> </div> </body> </html>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
オンラインの例を参照してください。

これらの機能を知っていれば、例1でモバイル向けGoogle Chromeの奇妙な動作の理由を理解できます。

新しく作成された要素のoffsetWidth

を測定すると、フォントブーストの前に値が取得されます。
同時に、この測定によりリフローページがアクティブになります。
最後に、要素の色を変更するとフォントのブーストが開始され、フォントサイズが増加します。また、フォントサイズの増加に伴い、 offsetWidth

もoffsetWidth

、上の2行で測定されたものよりも著しく大きくなります。

どうする

このようなフォントサイズのジャンプを防ぐには、次の2つの方法があります。

方法1-

フォントのブーストをキャンセルします。これを行うには、次のタグを追加して、Webページの幅（または、そのビューポートの幅）を画面の幅に等しく設定します。

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

その結果、ページのさらなるダウンサイジングは不可能になり、このダウンサイジングを補うために設計されたフォントブーストは当然開始されません。

例3

コードを表示

 <!DOCTYPE html> <html> <head> <meta http-equiv = "content-type" content = "text/html; charset=utf-8" /> <!--       --> <meta name = "viewport" content = "width=device-width, initial-scale=1"> <title>№1   Font boosting  Google Chrome for Mobile</title> <script type = "text/javascript"> window.onload = function () { var spnSpan1 = document.getElementById ("span-1"); /*  , font boosting  ,          . */ alert ("    : "+ spnSpan1.offsetWidth +"px"); //186px spnSpan1.style.color = "red"; alert ("    : "+ spnSpan1.offsetWidth +"px"); //186px } </script> </head> <body> <p> <span id = "span-1" style = "display: inline-block;"></span> </p> <p> abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc </p> </body> </html>

オンラインの例を参照してください。

ただし、特にjavascript-libraryを開発していて、最終ページを完全に制御できない場合、この方法は常に適用できるとは限りません。

方法2-

要素を作成した直後にフォントを強制的にブーストします。これを行うには：

リフローページを呼び出します。リフローを呼び出すには、たとえばdocument.body.offsetWidth

測定しdocument.body.offsetWidth

。
要素にdisplay: inline-block

場合は、その色も変更してから戻します。

その結果、要素でいくつかの意味のあるアクションを実行し始める頃には、フォントサイズのジャンプは既に行われ、気になりません。

例4

コードを表示

 <!DOCTYPE html> <html> <head> <meta http-equiv = "content-type" content = "text/html; charset=utf-8" /> <title>№2   Font boosting  Google Chrome for Mobile</title> <script type = "text/javascript"> window.onload = function () { var spnSpan1 = document.getElementById ("span-1"); /*  font boosting    . */ doReflow (); doFontBoosting (spnSpan1); /*  ,         . */ alert ("    : "+ spnSpan1.offsetWidth +"px"); //186px spnSpan1.style.color = "red"; alert ("    : "+ spnSpan1.offsetWidth +"px"); //186px } function doReflow () { document.body.offsetWidth; } function doFontBoosting (elElement) { var strColor = elElement.style.color; elElement.style.color = (strColor == "red" ? "blue" : "red"); elElement.style.color = strColor; } </script> </head> <body> <p> <span id = "span-1" style = "display: inline-block;"></span> </p> <p> abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc </p> </body> </html>

オンラインの例を参照してください。

おわりに

原住民の1人がモバイルブラウザで予期しないフォントサイズのジャンプに突然遭遇した場合、このメモが一定の時間と神経を節約することを願っています。 _{戦争ではなくコードを作成します。}

モバイルブラウザでのフォントブースト