ピクセル数の幅と高さは、必ずしも全体像を示すとは限りません。これは、画面にアイテムを追加したり、画面からアイテムを削除したりするのに最適ですが、適切な画像を設定するには適切ではありません。MBPにRetinaディスプレイを使用すると、画面の半分に設定されたブラウザウィンドウの幅は、現在のほとんどのマシンと同じピクセル数になります。ただし、DPIが高い場合、表示される画像は小さすぎる可能性があります。
ピクセル数の幅と高さではなく、DPIに基づいて画像を変更する方法はありますか?
ピクセル数の幅と高さは、必ずしも全体像を示すとは限りません。これは、画面にアイテムを追加したり、画面からアイテムを削除したりするのに最適ですが、適切な画像を設定するには適切ではありません。MBPにRetinaディスプレイを使用すると、画面の半分に設定されたブラウザウィンドウの幅は、現在のほとんどのマシンと同じピクセル数になります。ただし、DPIが高い場合、表示される画像は小さすぎる可能性があります。
ピクセル数の幅と高さではなく、DPIに基づいて画像を変更する方法はありますか?
次のいずれかを実行できます。
<link
rel="stylesheet"
type="text/css"
href="/css/retina.css"
media="only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)"
/>
また
@media only screen and (-moz-min-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
/*use CSS to swap out your low res images with high res ones here*/
}
2021年には、サファリを除くすべての最新ブラウザで、解像度、最小解像度、最大解像度のメディアクエリを使用できます。
header {
background-image: url(low-res-background.jpg);
}
@media (resolution >= 2dppx) {
header {
background-image: url(hi-res-background.jpg);
}
}
しかし、CSSだけが答えではありません。HTMLだけを使用することもできます。でResposiveImagesをご覧ください<img srcset=...>
。
ps
dpiを使用して解像度を指定することもできますが、これは印刷の場合にのみ意味があります。
@media print and (min-resolution: 72dpi) {
p {
text-decoration: underline;
}
}
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/resolutionを参照してください
あなたが探しているのは、デバイスのピクセル比です。iPhoneのようなものは320pxの画面のように表示されますが、640pxのレイアウト(ピクセル比2)であるためです。メディアクエリでは、「device-pixel-ratio」を使用します。ただし、ベンダープレフィックスを引き続き使用するようにします。
それに関する良い投稿: http: //menacingcloud.com/?c = highPixelDensityDisplays
css機能もありますが<img srcset>
、-webkit-image-set
Safari / Chrome/Operaでしかサポートされていないようです。例:
<img src="image.png" srcset="image-1x.png 1x,
image-2x.png 2x, image-3x.png 3x">
background-image: -webkit-image-set(
url(icon1x.jpg) 1x,
url(icon2x.jpg) 2x
);
MoinZamanが受け入れた回答の例がIE/Firefoxで機能するかどうかはわかりません。おそらく「最小解像度」を使用する必要があります。
@media only screen and (min-resolution: 192dpi),
only screen and (min-resolution: 2dppx)