WPtouchが正常に読み込まれなくなった原因は「iframe」だった!

Wordpres button
【img via WordPress Button Closeup by Titanas

今朝公開した「microSDメモリカードスロット搭載!30ピンコネクター対応のiPhone 5用バッテリケース「iExpander」がKickstarterで資金募集中!」という記事をモバイルで見た時に、表示が崩れていることに気付いた。

Chromeの開発者モードで色々と検証した結果、どうやらスマートフォン用表示に切り替えてくれる「WPtouch」が正しく読み込まれていないことが発覚した。先ほど原因が分かったので、メモしておく。

色々と表示がおかしい!

どういう状態だったかと言うと、とにかく表示が色々と崩れていた。

まず、記事内の画像がすべてPCサイズのままで表示されていた。本来であればスマートフォン用サイズにリサイズされれるはずだ。
WordPress iframe

画像が大きく表示されていたため、右に無駄な余白ができていた。
WordPress iframe

さらに、はてブボタンが表示されていなかった。
WordPress iframe

原因はiframeにあった!

Chromeの開発者モードでソースと睨めっこしていて気付いたのは以下の2つ。

  • 「WPtouch」用のHTML/CSSではなく、PC向けのものが読み込まれていた
  • 他の記事は正常に「WPtouch」が読み込まれていた

そこで、記事そのものに問題があるという仮説を立てて、今朝書いた記事をよくよく見返して見たところ、原因として考えられそうなコードを発見した。

iframe」だ。「iExpander」の紹介動画だった。
Iframe wordress

iframe消したらWPtouchが正常に読み込まれた!

思い切って「iframe」を消してみたところ、見ての通り、すべて本来あるべき表示に戻った!!原因はやはり「iframe」だったようだ!!

画像も正しくサイズで表示されている!
WordPress iframe

余計な余白もない!
WordPress iframe

そしてはてブボタンも問題なく表示された!!よっしゃ!
WordPress iframe

iframe自体あまり使うこともないかもしれないが、もし使うことがある場合は「WPtouch」の表示に問題がないか確認した方が良さそうだ!

あわせて読みたい