大型ディスプレイでの表示​​が異なります

Question

私のウェブサイトには異なる表示ができます。私はすでにスマートフォン、タブレット、デスクトップを扱っていましたが、私は大画面のためのものでしたが、私は解決の面で話すだけではありません。私はディスプレイが21インチ以上の画面で違うようにしたいが、15インチのラップトップでも同じ解像度になっていても同じに見えるはずはない。

ピクセル密度に基づいてメディアクエリを使用しようとしましたが、結果が混在しているため、最適なアプローチかどうかはわかりません。私はこれを試しました：

@media screen and (max-resolution: 115dpi){ 
    /* CSS rules */ 
} 

私は思った結果がありません。 1920x1080の解像度と94.53のピクセル密度の23インチモニター、1440x900の解像度と127.68のピクセル密度を持つ13インチMacBookのテストを行っています。しかし、ディスプレイは両方のデバイスで同じですが、解像度の異なるいくつかのラップトップで動作するようです。だから私は混乱してきている。

私には何が欠けていますか？ピクセル密度を使用するのが最善の方法ですか？それ以外の選択肢は何ですか？

おかげ

Answer 1

人々は、高解像度の画像を提供するためにそれを使用し、それはまだデスクトップのディスプレイ上で検出されました。

モバイルデバイスはページに、デバイスの幅をレンダリング、ビューポートメタタグを追加する必要があることを確認する：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 

人々はまだで、ビューポートを照会理由、すなわち@mediaすべてと（MAX- width：320px）は、320ピクセルはまだピクセル密度に関係なく320ピクセルです。それは同じサイズになります。

Answer 2

あなたがmin-widthメディア機能を使用して、あなたのメディアクエリで式を欠けている表示されます。

幅メディア機能は、幅が（出力デバイスのレンダリング面 の幅を記述またはプリンタのページボックスの幅である ）を使用します。

---

通常画素において、min-widthメディア機能と出力デバイスの幅に続く別のand論理演算子を追加します。

---

例：あなたが達成したいんどのような結果

@media screen and (min-width:1680px) and (max-resolution: 115dpi) {}