このブログはWordPressを使用して作っているのですが、モバイルの表示がおかしい現象が起こったので共有します。
おかしくなるまで
WordPressの良いところは、いろいろな機能がplug-inの形で提供され、各々のスキルによらないで、しっかりしたサイトを作ることができることです。
自分一人の知識、スキルではこんなブログはできないです。ありがたいです、ホント。
色々なサイトを参考にして、セキュリティやらレイアウト、バックアップ系などを入れておりました。
すると、段々表示が遅いような気がしてきたんですね。
そこで、googleのwebmasterToolを使いサイトの評価をしたところ、モバイル50点、ディスクトップ60点（両方100点満点中）となりました。
こりゃ少し高速化についてやらないといけないと思ったんです。
高速化から現象発生まで
そんな簡単に高速化出来るのか半信半疑でしたが、それ用のplug-inが結構あったりして、導入して有効化すれば大丈夫なんて感じだったのでいろいろ入れまくったんです。
（これがダメポイントですが・・）
画像圧縮やら、javascript圧縮やら、自動WordPress最適化とかheader最適化とか・・etc
一応一つずつ有効化しては、WebmasterToolでスコアをパソコンで確認してました。
確かにドンドン数字が良くなるんです。
それに気を良くして、その日は、安らかに眠ったんですね。
んで、朝、iPhoneで見てみると・・！
ニッコリマーク！？
一瞬、通常のように表示されるのですが、すぐに消え、何故かニッコリマークだけになってしまいます。
真っ白ページに小さくニッコリマーク。
ちょっと狼狽えました。
急いでWebmasterToolで見てみると、モバイルの下の方の修正するべきポイントにviewportが設定されてませんとありました。
グーグルは結構親切で、それじゃどうしたらいいの？には答えてくれます。
このコードを入れといてねみたいな。
でも、一応、それっぽい場所に既に同じ様な記述があるんですよ。
なんじゃこりゃ。わからんと一度パソコンをそっと閉じたのでした。
いやいや直したい
深呼吸して、もう一度iPhoneで、iPadで見てみましたが、状況はかわりません。
バックアップから戻そうかな・・でもリストアの方法わかんねーし。（意味ない）
困りました。
とりあえず、昨日入れたplug-inを外してみました。
昨日入れた全てを外すと、元に戻りました！
結局
一つずつ入れてみると、header cleanerが原因でした。
とりあえず、これを外したまま様子を見ようと思います。
コメント