🤲🏽 🚵🏼 ✍🏼 120 dpiおよびemのフォント 👨‍⚕️ 🧛🏽 👩🏻‍🍳

Em /％のフォントはすべての人に適しています-IEユーザーはサイズを大きくすることができ、テキストを見やすくするためにブラウザーのデフォルトのフォントサイズを大きくすることを好み、プロのタイプセッターの標準です。

短所：...なくなったようですが、！

しかし、ユーザーの画面解像度が標準の96 dpiに設定されておらず、120に設定されている場合はどうでしょうか？

フォントが大きいサイトは、デザイナーが描いたほど美しくありません。結局のところ、サイト全体ではなくフォントのみが拡大縮小されます。また、特にラップトップでは、120dpiの解像度がより一般的になっています！どうする？ pxに戻りますか？

いや！

~~Operaにはこのバグはなくなり、解決を無視します。~~ ~~しかしIE9では、記事のコードを使用して、サイト全体でフォントが縮小されたバグがあります。~~ ~~すべてのブラウザで120dpiの修正を使用しないでください。IE6/ 7のコードのみを残してください。~~

注意！ 2013年現在、この記事は古く、その情報は理論的な知識にのみ役立ちます。 本番環境でコードを使用しないでください！ 彼はもう必要ありません。

* Operaにはこのバグはなくなりました。一般的には、もうすぐ別のエンジン（Webkit）に搭載される予定です。

* IE6および7は既に履歴項目であり、ほとんどの人がそれらをサポートしていません。

*実際、EMを補う人はほとんどいません。ほとんどの場合、レイアウトでスタイルの独立性（BEMメソッド）のためにPXを再び使用します。

そこで、問題を特定します。

Windowsでは、画面解像度が96 dpiを超えると、IE≤7とOperaはデフォルトのフォントサイズを比例的に増加させます。

これにより、通常、固定幅のサイトで不快なデザインの歪みが発生する可能性があります。

FirefoxおよびSafari / Chromeは画面dpiを無視します。

ゴム-設計者が意図したとおり：

流体設計96dpi

ゴム-120dpi：

流体設計120dpi

固定幅-デザイナーが意図したとおり：

固定設計96dpi

固定幅-120dpi：

固定設計120dpi

ラバーモックアップでは、サイズを拡大しても一般に問題は発生しませんが、固定幅のサイトでは、割り当てられた狭い列に拡大文字が収まらない場合があります。 大きなサイズは、残りの未検証のグラフィックの横にいように見えます。

フォントサイズが増加するとどうなりますか：

原則として、フォントのみが拡大されます。サイトを分割するブロックも増加します（サイズがem /％で指定されている場合） が、グラフィックは増加しません ！

これは、サイズ変更可能なフォントを放棄する必要があるという意味ではありません！

実際、非常に大きなモニターでは、120 dpiは流行ではなく必需品です。小さな活字は見にくいです。また、ユーザーは、この特定のページと一般的なブラウザー設定の両方で、すべてのサイトでフォントサイズが大きくなるように、フォントサイズを大きくしたいだけです。

サイトの使いやすさを低下させるために、 ~~人々を高く壊さ~~ないでください。しかし、デザイナーが意図したとおり、サイトは見た目が美しいはずです。なぜなら、彼らは洋服で会うからです。

CSSを使用すると、ユーザーの解像度を確認し、それに比例してフォントサイズを縮小できます。

 html {font-size: 68.75%} /*   11px */ @media all and (min-resolution: 120dpi) { html {font-size: 55%} /*   : 68.75/(120/96) */ }

IE6 / 7の場合、次のコードが必要です。

 #header { scrollbar-track-color:expression( this.runtimeStyle.scrollbarTrackColor = "#fff", ((screen.deviceXDPI/screen.logicalXDPI) == 1) ? (document.body.style.fontSize = 1/(screen.logicalYDPI/96) +'em') : false ); }

これは1回限りの¹つの式で、画面のdpiに比例して基本サイズを変更します。

さらに詳しく分析してみましょう。

#header

ここには、レイアウト内の既存のブロックのIDを指定できます。「キャッチする」ためだけに必要です。表現自体がボディのスタイルを変更します。

scrollbar-track-color

color-「残念ではない」プロパティ IEでは、色分けされたスクロールバーファミリの独自のプロパティを使用しています。要素にスクロールバーがない場合（つまり、オーバーフロー値が表示（デフォルト）または非表示）の場合、このプロパティはブロックの表示に影響しません。

screen.deviceXDPI

^2-ブラウザーの画面の実際のdpi。

screen.logicalXDPI

^3-画面の標準dpi（Windowsで設定、通常= 96）

通常、screen.deviceXDPI == screen.logicalXDPI。ただし、例外は以下にあります。

IE6 / 7は、高解像度の画面で比例的に拡大縮小できます。

プロパティ

HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Main\ 
      

        
        
        
      

     UseHR = dword:00000001

がこれを担当します。

HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Main\ 
      

        
        
        
      

     UseHR = dword:00000001

MSDN ⁴は、高解像度モニターのメーカーがこのパラメーターを設定できることを伝えているようです。

次のようになります。

ズームが有効なIE（UseHR = 1）：

IEズームオフ（UseHR = 0）：

IEオフズーム

このオプションを有効にしてスケーリングを達成することはできませんでしたが、安全に再生し、IEスケールファクターを確認し、1の場合（つまり、スケーリングがオフの場合）だけ、ボディのサイズを比例的に変更します。

document.body.style.fontSize = 1/(screen.logicalYDPI/96) +'em'

本文のフォントサイズを（カスケードで）自動的に変更すると、他のすべてのフォントのサイズが変更されます。

IE 5は、残念ながらscreen.deviceXDPI / screen.logicalYDPIをサポートしていないため、このコードは機能しません。

IE8はどうですか？

IE8では、すべてが非常に美しくエレガントに行われました。ブラウザーは、画面のdpi ⁵に比例してページのコンテンツ全体を増やします。

流体設計IE8 120dpi

96dpi	120dpi	144dpi

つまり全ページズームは自動的にオンになります。

screen.deviceXDPI、screen.logicalXDPI、およびページズームに関する叙情的な余談

IE8では、フルページズームを有効にすると、screen.deviceXDPIの値が変更されます。 125％の場合、ズーム= 120、150％-144。100％の場合（スケーリングなし）、screen.deviceXDPIは96に戻ります。Windowsのdpiは問題ではありません。

それが（screen.deviceXDPI == screen.logicalXDPI）に必要なチェックです！

これは、IE8の右下隅にあるユーザーが[ページのズーム]をクリックして変更した場合です。

しかし、8-keのscreen.logicalYDPIは明らかに一定の数であり、私のテストでは常に96でした。

7-keおよび6-keでは、テスト中にこれらの値の両方がWindowsの設定に応じてのみ変化しました。 IE7のページズームは、どちらのプロパティの値も変更しませんでした。

古代のサイトに松葉杖を書いていたときに記事を書いた後、私は偶然これを発見しました:)

ところで、IE8のページズームはIE7よりも優れています。

IE7フルページズーム：

IE8フルページズーム（適応ズーム）：

水平スクロールは、列の幅が固定され、改行が新しい場所に挿入された場合（スケーリング後）にのみ表示されるようになりました。一般に、FFおよびOperaでの発生と非常によく似ています。

このメカニズムはアダプティブズームと呼ばれます。詳細については、IE ⁶開発者のブログをご覧ください。

IE6 / 7では、次のように同様の動作を実現できます。

 div#header { scrollbar-track-color:expression( this.runtimeStyle.scrolbarTrackColor = "#fff", (((screen.deviceXDPI/screen.logicalXDPI) == 1) && (screen.deviceYDPI > 96)) ? ( document.body.style.fontSize = 1/(screen.logicalYDPI/96) +'em', document.body.style.zoom = screen.logicalYDPI/96 ) : false ); }

120 dpi css-zoom IE6 / 7：

IE6 / 7での120dpiでのCSSズーム

これは、125％フルページズームIE7とは異なります。

IE7の125％フルページズーム

IE7のフルページズームは、html全体（水平スクロールが表示されるため）を増加させ、cssを介して本文のみにcssズームを設定できます。

css-zoomでは、IE7のフルページズームでの水平スクロールはありませんが、フラッシュオブジェクトには問題があります。マウスオブジェクトにカーソルを合わせると消え、部分的に表示され、「くしゃくしゃ」になります。

フラッシュのようなオブジェクトを使用しない場合、このメソッドを使用できます。

奇妙なことに、これはcss zoomプロパティを意図したとおりに使用するまれなケースであり、レイアウトの設定ではありません。

CSS3 Media Queriesを理解するFirefox 3.1はどうですか？

サイズを120dpi減らすには、CSS3プロパティmin-resolution

を使用します。

Firefox 3.1はそれを理解して適用します。ただし、同時に、フォントサイズは増加しません。そのため、その中のフォントは必要以下になります：

FF3.1の小さいフォントサイズ

修正します：

html {font-size: 68.75%} /*   11px==1em,     = 11px x Xem */ 
      

        
        
        
      

     @media all and (min-resolution: 120dpi) { 
      

        
        
        
      

     html {font-size: 55%} 
      

        
        
        
      

     html, x:-moz-any-link {font-size: 68.75%} 
      

        
        
        
      

     }

x:-moz-any-link

は、-moz-any-link疑似クラスを持つ存在しないx要素の選択です。 Geckoブラウザーのみがこの擬似クラスを理解し、残りは行全体を無視します⁷ 。

Opera 9の異常な不具合（<9.6）

FF3.1の修正を追加した後、Operaはmin-resolutionのルール120dpiの直後にcss-adを無視し始めました。

つまり次のコードがあります。

 html {font-size: 68.75%} @media all and (min-resolution: 120dpi) { html {font-size: 55%} html, x:-moz-any-link {font-size: 68.75%} } body,table,input,label,textarea,button,select {color: #000; font: normal 1em/1.3 Tahoma, Geneva, sans-serif}

body

始まるルールはOpera 9では無視されます。

さらに、Opera 8および9.6では、すべて問題ありません。

修正します：

html {font-size: 68.75%} /*   11px==1em,     = 11px x Xem */ 
      

        
        
        
      

     @media all and (min-resolution: 120dpi) { 
      

        
        
        
      

     html {font-size: 55%} 
      

        
        
        
      

     html, x:-moz-any-link {font-size: 68.75%} 
      

        
        
        
      

     } 
      

        
        
        
      

     #for-opera927 {/* dont' remove! */}

120dpiのサイトの外観を96にするかどうかはあなた次第です

繰り返しますが、サイトの開始形式について話しているところです。

画面解像度が120dpiのユーザーは、ほとんどのサイトを96とまったく同じように表示します（ほとんどのサイトは固定サイズで構成されているため）。 emに折りたたまれると、すぐに拡大表示されます。さらに、フォントサイズのみが増加し、グラフィックスは元のままになります。同意する-サイトはデザイナーが当初意図したほど美しくはありません。

それでは、ユーザーが意図したとおりに表示しないのはなぜですか？

それは任意の秒でその上のフォントサイズを増やすことができます。

ところで、ユーザー自身が120dpiを設定したのは事実ではありません。

このような設定がデフォルトであるラップトップを購入するだけでした。

また、ユーザーがFFまたはSafari（dpiでは無視されます）の基本フォントサイズを大きくした場合、見やすくなりますか？

修正がなければ、emを含むサイトには巨大なフォントが使用されます。

そして、IE8でのみ、サイトは美しく正確にスケーリングされます。

将来の証拠はどうですか？ブラウザの将来のバージョンに問題はありますか？

近い将来、問題の発生はほとんどありません。

修正は、次の場合にのみ必要です。

Safariは、最小解像度のCSS3プロパティを理解し始めますが、画面のdpiに応じてサイズは拡大しません。

この場合、FF3.1について記述したのと同様のルールでコードを補完します。
Internet Explorer 9は最小解像度の理解を開始し、IE8と同じ適応フルページズームを維持します。

これは、条件付きコメント^8を介してIE≥9を修正することで修正されます。
Operaは、高dpiでフォントサイズを大きくする代わりに、フルページズームを使用し始めます。

これは、FF3.1で記述したものと同様のルールで処理されます。

だから、ここに既製のソリューションがあります：

 html {font-size: 68.75%} /*      - */ @media all and (min-resolution: 120dpi) { html {font-size: 55%} /*   : 68.75/(120/96) */ html, x:-moz-any-link {font-size: 68.75%} /*     - */ } #for-opera927 {/* dont' remove! */}

IE6 / 7の場合：

 #header { scrollbar-track-color:expression( this.runtimeStyle.scrollbarTrackColor = "#fff", ((screen.deviceXDPI/screen.logicalXDPI) == 1) ? (document.body.style.fontSize = 1/(screen.logicalYDPI/96) +'em') : false ); }

UPD：何らかの理由でOpera 10.5+はルール@media all and (min-resolution: 120dpi) { ... }

応答しませんが、ドックは反対ですが、 presto 2.5でのみサポートされていたと書かれていますが、前に働いた？）。私はさまざまなオプションを試し、グーグルで検索し、Operaフォーラムを検索しましたが、何も見つかりませんでした/それは役に立ちませんでした。仕様から判断すると、コード内のすべてが正しいです。現在、Operaが修正するまで待つ必要があります。幸いなことに、120dpiの問題が一般的である西部では、Operaはほとんどありません。Operaが人気のあるここでは、120dpiの問題はほとんどありません:)

UPD2：pepelsbeyによると、Operaは最小解像度をサポートしなくなったため、メインのcss内のコードはオフにするだけです。 IE6 / 7用のコードを残すことができます。

注：
Pavel Kornilov：Internet Explorer用のThin CSS（式）
MSDN：deviceYDPIプロパティ
MSDN：logicalYDPIプロパティ
MSDN：高DPI画面のスケールの調整
MSDN：Webをより大きくする：DPIスケーリングとInternet Explorer 8
MSDN：Internet Explorer 8および適応ズーム
CSS2仕様によれば、ブラウザーは、セレクターでなじみのないものが見つかった場合にスタイルを無視する義務があります
MSDN：条件付きコメントについて

dpiの詳細：

Covodism：§70。画面解像度。そして、72 dpiの起源について少し

120 dpiおよびemのフォント