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コード。
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コード。
それを何分割かに分けます。
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コード。
■■■■■■■■■
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番目に入れたソースの中に問題が発生していることになります。
横幅に影響を与えるCSSが悪さをしていることがある
横幅に影響を与えるようなCSSが悪さをしているケースがあります。
今回の場合は疑似要素の「after」に設定した数値が悪さをしていました。
パソコンでは問題ないのですが、スマホにしたときに適した横幅設定をしていないところがありました。
そこを調整したら左右にブレなくなりました。
ブレの原因はいろいろ 意外とアナログが役に立つ
スマホでサイトを見たときに左右にブレることは意外と発生します。
その際、いろいろ考えるより、今回のような施策を試してみると意外と簡単に問題個所を見つけることができるかもしれません。
かなりアナログな方法ではありますが、確実に問題個所を見つけることはできます。
ちなみにソース的に問題ないか、「Visual Studio Code」を使ってチェックをしました。
おかしな記述がされている場合、色で教えてくれます。
同じような問題を抱えている方は、このような方法もあるということを覚えておいても損はないかと思います。
一応、変更前のソースコードはメモ帳か何かでバックアップをしておいたほうがよいと思います。
