スマホで見たらブヨブヨ横揺れしてしまう時に、画面が揺れないようにする必殺技
もちろん原因を探して対処するのがベストでますが、時間のない時に一旦原因を見つけるまでどうにかしたい場合これがおすすめ。
横揺れの一時的対処法
body {
overflow-x: hidden;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
cssにコピペするだけ。めちゃくちゃ無理やりですが、たいていの場合この記述で横揺れは解消されます。
横揺れの原因は文中にあるURLの折り返しができていない時や、画像がデバイスの画面幅を超えはみ出てしまっている時が多いので、このCSSを入れると画面やURLの途中で強制的に切ってしまうことになります。
このcssを入れた後に原因の箇所を見つけやすくなることもありますが、そのままにしておくとコンテンツが読めなかったり、かなり見栄えが悪くなったりする場合があるので、一時的に対処したあとすぐに原因を突き止めて調整するようにしましょう。
横揺れの原因
そもそも横揺れしてしまう原因は、何かが画面幅からはみ出しているためです。
よくある原因は、
- URLが突き抜けている
- iframeの幅が固定されている
- 画像がのサイズが固定されてはみ出ている
- テーブルがレスポンシブ対応していない
- 広告がはみ出ている
広告の幅調整をしていないサイトはよく見かけるので、スマホサイズでのブラウザチェックが注意して見たほうがいいでしょう。
インスタやツイッター、フェイスブックなどを埋め込むときも埋め込みサイズがデバイス最小幅まで対応しているか確認することをおすすめします。最近のスマホ用の幅は広めですが、ちょっと前の機種だとはみ出ているということもあります。
横揺れを見つける方法
どこが原因がわからないときは、モバイルチェッカーやスピードチェッカーで診断した時にエラーの箇所を教えてくれます。
モバイルフレンドリーテスト
https://search.google.com/test/mobile-friendly?hl=ja
PageSpeed Insights
https://developers.google.com/speed/pagespeed/insights/?hl=ja
それでもわからないときは、デベロッパーでHTMLの上から順にみていき、cssでwidth指定が固定値になっていないか調べていきましょう。
例えばwidthが500pxになっていたりmax-widthが指定されていない場合は、はみ出している可能性が高いです。
pxで指定するのではなく、パーセントを使ってwidth 50％などにすると解消されます。
原因がわかったら解消していきましょう
先ほどの例で挙げた内容で横揺れしているなら
- URL・・・対象に word-break: break-all; を入れて強制的に折り返す指示をする。
- iframe・・・iframeを新しいdivで囲って、max-widthを100％にする。
- 画像・・・サイズを％指定にする。max-widthを100％にする。
- テーブル・・・テーブルや表が複雑ならsp用に組み直して、Media Queriesでpc・spを切り替える
方法はほかにもあると思いますが、まずが応急処置をして、表示を整えましょう。
一時的処置をしたあとに、原因を突き止めて調整していくと離脱率はかなり軽減されると思います。
原因がみつかれば応急処置cssを外せばOKなので、ぜひ試してみてください。