画像はイメージ。横揺れは横幅100%を突き破っているのが原因
レスポンシブのサイトでPCだと何ともないのに、iPadやスマホだとパッと見は問題なくても、縦にスクロールすると妙に横にグラグラ揺れてしまうサイトがある。
今まさにその問題に直面しているなら、原因は大体はっきりしているので安心して欲しい。
原因はレスポンシブの鉄則を守らずに「横幅100%」を突き破っている要素が存在するからだ。
目次
まずデベロッパーツールなりで横幅チェック
サイトを作った時はもちろんだが、サイト運営中でもプラグインや広告など、何かしらの追加や変更で横幅100%を超えてしまう場合がある。
デベロッパーツールを使ってipadやスマホの画面サイズをシミュレートしながら、飛び出している要素がないかチェックしよう。%ではなくてpx指定になっているオブジェクトは全体の設計次第では突き破る原因になりやすい。
原点が特定できたら%指定に変えたり、飛び出さないように何らかの対策をして無事完了。
緊急用としては全体にoverflow-x:hidden
原因が特定できないけど、とりあえず何とかしたい場合専用の最終兵器がある。
ページ全体、つまりhtmlや描画される部分全体であるbodyに横幅のはみ出し部分を強制的に隠してしまう方法だ。
cssのコードとしては下記になる。
html {
overflow-x: hidden;
}
body {
overflow-x: hidden;
}
但し、これは最終兵器であってオススメ度は低い。
ページの構造、要素によっては表示や動作に不具合が起きるからだ。ページの中にfixedやstickyなどで固定表示している要素がある場合に問題が起きたり、そもそもデザインが見切れてしまう場合もある。一時凌ぎには良くても、将来のデザイン変更の時などに、これが原因で色々うまく行かなくなる事態も想像できる。
以上の理由から、大幅なデザイン修正が必要な時の時間稼ぎくらいに使うと良いだろう。詳細に実機チェックして問題が出なければ、それはそれで一件落着とも言えるけど。
余談 スマホよりiPadの方が実は厄介
個人的な経験だとスマホよりiPadでこの問題に遭遇しやすい。スマホ向けのCSS設計はシンプルだから、よほどケアレスミスしていない限りは横幅が100%を突き破ることは通常ないのだ。
ところが、iPadは横向きにするとPCに近い解像度になる特性がある。iPad向けのサイズを細かく作っていないと微妙なハミ出しが起こるのだ。大企業のサイトなんかでも、スマホとPC向けはユーザーが多いからちゃんと作るけど、iPadはマイノリティだから雰囲気程度にしか作っていない場合は多い。
Chromeなどのシミュレーターではこの現象は起きないので、実機チェックをきちんとしていないと問題に気づけないというのもある。まさに裸の王様状態だ。
上場企業の某サイトなんかでもこの現象が起きていて、「実機チェックしてないんだろうな～」とか「エンジニア寄りで作られていて、デザインの細部に無頓着なんだろうな～」とか、勝手に思ったりもするのだ。チェック不足や技術力の無さが露呈してしまう。
そんなふうに見ている人に思われないように、横グラグラ現象はできる限りスマートに直したいものだ。制作会社とかでなくて、一般企業だと金のある大手ですら検証用のiPadが制作者に配布されていることは滅多にないしね。改めて思うが、実機チェックは重要だ。
