スマホで見たときに画面が左右に揺れる　overflow:hiddenで解決できない

PCでは問題ないのに、スマホでサイトを見たときに左右に揺れることってありませんか？

上下にスクロールするときに左右に揺れて気持ち悪い感じになってしまうため、何とか直したいと思っている人も多いかと思います。

「スマホ　左右にずれる」のようなキーワードで調べてみると、「overflow:hidden;で解決できる」のようなのですが、うまくいかないこともあります。

ということで、何が問題なのかの根本原因を探ってみることにしました。

原因の探り方はアナログ

この問題が起こる原因って、経験上ではありますが意外とシンプルです。

ソース上のどこか1ヶ所に問題が発生しているケースがほとんどです。

しかしその1ヶ所を探すのが意外と大変だと思います。

弊社の場合は、ソースを何個かに分けます。

例えばページが以下のようになっていたとします。

HTMLコード。HTMLコード。HTMLコード。HTMLコード。HTMLコード。HTMLコード。HTMLコード。HTMLコード。HTMLコード。HTMLコード。HTMLコード。HTMLコード。HTMLコード。
HTMLコード。HTMLコード。HTMLコード。HTMLコード。HTMLコード。HTMLコード。HTMLコード。
HTMLコード。HTMLコード。HTMLコード。HTMLコード。HTMLコード。HTMLコード。HTMLコード。HTMLコード。HTMLコード。
HTMLコード。HTMLコード。HTMLコード。HTMLコード。HTMLコード。HTMLコード。HTMLコード。
HTMLコード。HTMLコード。HTMLコード。HTMLコード。

それを何分割かに分けます。

■■■■■■■■■

こんな感じです。

今回は3分割にしました。

そしたら、一番上のソースの塊をページに入れて保存。

問題が発生するかを確認します。

発生しなかったら次の塊を入れます。

もしそこで問題が発生したら、2番目に入れたソースの中に問題が発生していることになります。