WordPressでiPhone(スマホ)だけ画像が表示されない時

画像がPCでは表示されるがスマホでは表示されない

WordPressでPCでは通常通り表示されている画像が、スマホでは表示されないという事象に遭遇。

PCでレスポンシブ表示にしても表示される。でも実機だけ表示されない。。。

画像のタグを見てみると、「 srcset」という見慣れない属性がついている。

The srcset attribute

画面のサイズとかで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' );

これで大丈夫になりましたーと思ったら、、、まだ読み込まれない。。。

ファイル名が日本語なのが悪いのか？と思ってローマ字にしてファイルアップロードしたら表示された。

色々と不安は残るけど、、、

 

 - wordpress