srcsetで画像を切り替えられない

Question

前提・実現したいこと

srcsetでスマホ画面時に画像を切り替えたいと思っています。
しかし、実際にはPC用の画像しか表示されません。
そこで「検証」で確認してみたところ、以下のような問題が起きていました。
コードではスマホ用の画像を指定しているはずなのに、
詳細を表示してみると読み込み先のURLがPC用の画像になっています。
これは何が起きているのでしょうか。
わかる方がいましたらコメントお願いします。

発生している問題・エラーメッセージ

コードでは指定先になっているのに、current sourceでは読み込み先が違う

該当のソースコード

<div class="catch-area">
            <img class="top-image" srcset="img/[e-mail] 375w, img/[e-mail] 1440w" sizes="(max-width: 480px) 280px, 1000px"/>
</div>

試したこと

firefoxでの確認
キャッシュ削除後のリロード

補足

chrome

Comments

[tabuu]

単純にスマホのスマホの画面解像度が480px以上なのだと思います。
動作確認しているスマホの機種と画面解像度は分かりますか？

[aiai8976]

追記しましたが、iphoneXの
375*812です。

Answer 1

iPhoneXは3倍レティーナなので
375px * 3 = 1125px

480pxより大きいのでPC用画像を参照していると思われます。

Comments

[aiai8976]

なるほど。その考え方に関しては理解しました。
となると、今回PC用とスマホ用で画像を出し分けたい場合はどのように記述すべきなのでしょうか？

[tabuu]

レスポンシブではなくデバイスで画像を切り替えたいということでしたら、
JavaScriptでUserAgentを取得してimgのsrcsetやsizesを書き換えることは可能です。
(imgのsrcを直に書き換えることも可能です)

[aiai8976]

pictureタグとsourceタグを使うことで出し分けることができました。