画像がPCでは表示されるがスマホでは表示されない
WordPressでPCでは通常通り表示されている画像が、スマホでは表示されないという事象に遭遇。
PCでレスポンシブ表示にしても表示される。でも実機だけ表示されない。。。
画像のタグを見てみると、「 srcset」という見慣れない属性がついている。
画面のサイズとかでimgタグのsrcを自動的に切り替えてくれるもの。
どこを探してもそんなプラグイン入ってない！と思ったら、WordPressのバージョン4.4から自動で入るっぽい。
Responsive Images in WordPress 4.4
これ自体は問題ないのかな？とりあえずスマホ(iPhone)をmacにUSBでつないでsafariを立ち上げて、webインスペクタでデバッグしてみる。
srcset自体は動いていて、読み込もうとしているけど、画像がない。。。
アップロードした時に自動で作るのがうまく動いていないのかな？おそらくテーマの中の「add_image_size」あたりも関係してそう。
ここまで調査したけど、めんどくさくなって、Responsive Imagesを無効にしてしまうことに。
add_filter( 'wp_calculate_image_srcset', '__return_false' );
これで大丈夫になりましたーと思ったら、、、まだ読み込まれない。。。
ファイル名が日本語なのが悪いのか？と思ってローマ字にしてファイルアップロードしたら表示された。
色々と不安は残るけど、、、