どうも！しろくまです。
長年悩まされてきた、このブログをスマホから見ると横スクロール(ガクガク)する現象をやっと解決することが出来ました。
今回はその方法を解説してみたいと思います。同じ現象で悩まされてきた方がいましたら参考にしていただければ幸いです。
現象：横スクロールとは？
「横スクロールする」とはどういうことか説明します。
通常はこのように左に配置したマークや文字がちゃんと見える状態です。
この状態から、左へスワイプしてみると・・・
このようにページが全体的に左に寄ってしまうのです。そうなると左に配置したマークや文字が半分見えなくなってしまいます。
ページ幅に対してブログの幅が大きいためにこのような横スクロールが可能な状態になってしまうのです。
この状態になってしまうとユーザに対して意図しない横スクロールを誘発してしまいます。ブラウザによっては横スクロール中は縦スクロールが出来なくなるため、操作感が非常に悪くなってしまうという問題が起きます。
調査方法：トライ＆エラー
ということで調査を開始することにしました。検索してみたところ以下の原因が考えられそうなことが分かりました。
1. アドセンスの広告のサイズがスマホ用ページ幅を超えている
2. 広告以外にスマホ用ページの幅を超えている要素がある
アドセンスに関しては、スマホのページ幅(320)よりも大きいサイズのユニット(レクタングル大以上)が配置されていると起こるそうです。しかしそれに関してはレスポンシブ(自動サイズ)という広告サイズにしていましたので関係ないと判断しました(後々この判断が間違っていることが分かります)。
よって、広告以外にページ幅を超えている要素がないかと調べることにしました。しかし、時間をかけてHTMLソースやCSSを確認したのですが、そんな要素はありません。
仕方がないので最終手段として、HTMLとCSSを1つずつ消して戻してを繰り返して横スクロールしなくなる要素を探しました。
それでもなかなか見つからない！ かれこれ2時間近くは調べましたが横スクロールが一向になくなりません。
原因：犯人はレスポンシブ
そんな時、なんとなくアドセンスのコード自体を消してみたところ、横スクロールがなくなりました！
アドセンスの広告に問題があることが分かったので、色々な広告サイズを試してみたところ以下のことが分かりました。
▽横スクロールするサイズ
・レクタングル(大)(サイズ：336×280)
・レスポンシブ(サイズ：自動)
▽横スクロールしないサイズ
・レクタングル(サイズ：300×250)
・ハーフバナー(サイズ：240×60)
レクタングル(大)以上がページ幅を超えることは知っていましたが、レスポンシブもページ幅を超えるとは知りませんでした。しかし、ネットで色々調べた感じ、レスポンシブで問題が出たという情報はありませんでした。もしかしたら僕の環境でしか起きないのかもしれません。
対策：スマホでもレクタングル(300×250)
ということで、実験結果の通りスマホサイトにもレクタングル(300×250)を使うことで横スクロールしなくなりました。
懸念としては、大きめの画面サイズのスマホ(タブレットも？)で見た時にも300×250で表示されてしまうことですね。本来はもっと大きな広告でも表示できます。レスポンシブだとそれを自動判別して大きなサイズの広告に変えてくれるのですが。。。
ちなみにスマホの画面をさせた時も同様に広告が変わりません。
縦
横
まぁこれは妥協するしかないですかね。
最後に
ブログをスマホで見る時に横スクロールしてしまう時は、アドセンスのサイズを見直してみてはどうでしょうか。
ちなみに、レスポンシブの説明を見てみると、
レスポンシブ ウェブデザインとは、表示されている端末（画面）の機能に応じて、ウェブサイトの表示を動的に制御できる機能を指します。レスポンシブ広告ユニットを使用すると、各端末において広告以外の部分のレイアウトに合わせて広告のサイズを制御できます
引用：レスポンシブ広告ユニットについて - AdSense ヘルプ
とあります。
うーん、、「制御」がどこまでを指すのか微妙なところです。ページ幅をきっちり判断して横スクロールしないようにしてくれるのか、少しくらいの横スクロールも含めて最適な広告を表示するのか。今回の件から考えると後者の仕様なのかなという感じです。
まぁとにかく直って良かった！ これでスマホサイトが快適に見られるようになりました。
僕のスマホ(iphone6s)では横スクロールしなくなりましたが、もし私のスマホだと横スクロールするよって方がいましたらご連絡いただければ幸いです。
