DPIスケーリング-フォント-ブラウザーの互換性の問題
多くの場合、Windows 7ユーザーは、コントロールパネル-表示オプションに移動し、カスタムDPI設定（110％）を選択して、大きなモニターがありはっきりと見えない場合にフォントサイズを大きくします。
この場合、一部のWebデザインはOpera 11およびInternet Explorer 9の最新バージョンで破損します（1つのWebデザインが1つのブラウザーで破損し、もう1つのデザインが他のブラウザーで破損します！）。これは、dpiスケーリングを使用するすべてのコンピューターで発生するわけではありません。一部のコンピューターではIE9で壊れますが、他のコンピューターでは壊れません。
つまり、フォントが巨大になり、テキストがボックスから出て、要素の正しい流れが崩れるということです。
標準のフォントを使用しています。
HTML5/CSS3を使用することを好みます。私は通常、最近HTML5ボイラープレートからreset.cssまたはnormalize.cssを使用します。
どのように開発する必要がありますか、またはdpiスケーリングが設計を壊さないようにするために含める必要のあるCSSハックは何ですか？
これは通常のクロスブラウザー互換性の問題ではなく、特定の場合にのみ発生する非常に奇妙な状況であり、特定のブラウザーとコンピューターの組み合わせで発生しますが、これらすべてのコンピューターにはdpiスケーリングがあります。問題は、同じブラウザと同じdpiスケーリングでは、同じ問題が表示される場合と表示されない場合があります。
問題はemでフォントを定義することでしたが、コンテナの幅はピクセル単位でした。フォントもピクセル単位で設定すると、問題が解決します。
この場合、各ブラウザの動作は異なります。
これは、サイトを表示するには低すぎる解像度を使用したり、ブラウザのズームを使用してテキストサイズを大きくしたりする人々の問題と実際には違いはありません。
手動でテストし、実際にレイアウトを「壊している」ものを確認する以外に、あなたができることはあまりありません。ただし、すべてのレイアウトには、サポートされるプラットフォームと構成に関して実際的な制限があります。
要素（およびそのすべての親）を含むすべての単一テキストに対してオーバーフローモードを明示的に指定できますが、同じフォントをわずかに異なるレンダリングするブラウザや行折り返しまたはテキスト配置/正当化アルゴリズム。