質問: srcsetによるPCサイトとSPサイトの画像の切り替えソースを入力したのですが、切り替わりませんでした。。。 同じように質問している方(URL:)の内容も確認をしたのですが、わかりかねたので質問させていただきます。 ``` ``` 確認ブラウザはChromeで、エミュレーションでPC表示とSP表示の確認をしています。 ブラウザで確認をすると、PCサイトでスマホ用の画像が表示されてしまって画像の切り替えがでいていません。 解決したいことは 表示されない原因の特定と、その確認方法を教えていただきたいです。 また、すべてのブラウザで対応がされてはいないとのことなので、その対策としてのpicturefill.min.jsはダウンロードして読み込めるようにしてあります。 ``` ``` 入れる前、入れた後の変化(画像の切り替え)はありませんでした。 どうか、ご助力お願いいたします。
回答: 参考サイト http://kia-king.com/blog/tutorial/responsive-images-with-srcset/ 上記サイトを参考に、修正いたしました。 元のコードと修正後のコードが以下になります。 ``` ``` ``` ``` 元コードだと、chromeのPC画面表示でも、エミュレートで確認でも、画面サイズによらず全ての画像が@2xのサイズになってしまっていました。 そこで、細かな設定を加えたのが修正コードになります。 メディアクエリの設定を加えることで、画面サイズによって詳細に画像の切り替えができるようになりました。 そして私の確認環境ではパソコン画面での表示もレティナ表示になっていたので、srcsetの320wと640wに1280wを追加設定しました。 1280wがないと、パソコン画面がレティナ表示なので640wに設定した画像がパソコン画面で表示されてしまいました。 参考サイトはとてもわかりやすく説明してくれているので、同じような現象が起きてる人の助けになるかもしれません。