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

【img via WordPress Button Closeup by Titanas】

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

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

色々と表示がおかしい！

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

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

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

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

原因はiframeにあった！

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

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

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

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

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

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

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

余計な余白もない！

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

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