img srcset スマホ実機ではウィンドウサイズでなくピクセルで判別される

検証した内容

srcsetのソース

wordpressの例でいえば、こんな感じです。

<img src="http://test.com/wp-content/uploads/20XX/XX/test_pic.jpg"
 alt="画像名" width="1500" height="1000"
 class="alignnone size-medium wp-image-XXXX"
 srcset="
        http://test.com/wp-content/uploads/20XX/XX/test_pic.jpg 1500w,
        http://test.com/wp-content/uploads/20XX/XX/test_pic-750x500.jpg 750w
        "
 sizes="(max-width: 1500px) 100vw, 1500px">

画像比率を3:2にして、アイキャッチ画像のサイズ設定を750pxで設定。（中サイズと大サイズは省略。）

で、iPhone実機で検証していきます。（シミュレーターだとブラウザごとの仕様などもあって正確ではないので、実機ベースの検証。）

iphone8なら750wが読込される

実機で試したところ、iphone8は、750wのもの、つまり、「test_pic-750x500.jpg」が読込されました。

iphone Xsでは750wは読込されない

ポイントはここです。

iPhone Xsでは、フルサイズ1500wの「test_pic.jpg」が読込されました。

ウィンドウサイズはiPhone8と同じ「375（750）」のはずなのに、なんで？と思ったのですが、その答えが「スマホはウィンドウサイズではなくてピクセル判別」ということでした。

iPhoneの仕様をチェック！

こちらの記事さまに詳しくある、iPhoneのスペック表をご覧ください。

すると、iPhone8とiPhoneXsは論理上の画面サイズ自体は「横幅375」で同じなのですが、じつはピクセル（実際に画面に表示されるサイズ）で見た時、「750px(8)」と「1125px(Xs)」という違いがありました。

Android端末も同じくピクセル判別！

手持ちのSHARPのSH-M03を使って同じく検証してみたところ、約4.7インチサイズの端末で、ウィンドウサイズは「375」なのですが、750wの画像は表示されず、1500wの画像が読込されました。

ピクセルサイズの仕様を調べてみると、「1920*1080」とあり、「1080px」のため、750wでなく1500wのほうになったようです。

きちんと実機で検証しよう

繰り返しになりますが、PCブラウザのシミュレーターで検証すると、上記と異なる結果になります。

実機で見てみないと分からないこともあるので、注意が必要です。（今後、仕様などが変わって、スマホ実機のウィンドウサイズで切り替わるようになるかもしれませんが、現状はこのような仕様みたいです。）