【覚え書き】デバイス毎に画像を出し分ける方法 <img>タグと背景画像 レスポンシブイメージ
物理ピクセル(デバイスピクセル)と論理ピクセル(CSSピクセル)について
一般的なディスプレイ
高解像度ディスプレイ
■■
■■
デバイスピクセル比が2:1のとき、
■ひとつ＝デバイスピクセル1px
■ふたつ＝CSSピクセル1px
になる
imgタグの画像の切り替え
＊勉強中＊
srcsetとsizeを駆使する
<img sizes="表示幅" srcset="各画像とサイズ" src="…">
IE非対応のため、picturefill.jsを併用する
背景画像の切り替え
基本的にはデバイス幅で出し分ける
@media screen and (max-width: 480px) { background-image: url(xxx_sm.jpg); }
@media screen and (max-width: 869px) { background-image: url(xxx_md.jpg); } など
Retina対応
- -webkit-device-pixel-ratio
- resolution
このふたつを付けること
- -webkit-device-pixel-ratio
iOSのRetina対応のため
-mozもあるが2018.10リリースのブラウザまでは-webkitで対応可
-webkit-max-device-pixel-ratio、-webkit-min-device-pixel-ratioも指定できる
- resolution
上記IE非対応のため、IE対策として
IE9以降に対応できるが限定的で、dpi指定のみ可能
dpi(dots per inch)、dppx(dots per px unit)、dpcm(dots per cm)で指定できる
使用イメージ
@media screen and (max-width: 480px), (-webkit-device-pixel-ratio: 2), (min-resolution: 192dpi) { background-image: url(xxx_sm@2x.jpg); }
@media screen and (max-width: 480px), (-webkit-device-pixel-ratio: 3), (min-resolution: 350dpi) { background-image: url(xxx_sm@3x.jpg); }
参考サイト
