横揺れは、スマホの画面幅より大きな要素がある場合発生します。
はみ出している要素の分だけ横にスクロールされます。
横揺れが原因で下にスクロールするのが難しくなって、離脱されてしまうことが多くなってしまうので、あまり良くありません
よくある原因としては、
表組みで使われる tableタグ
googlemapやfacebookなどでも使われる iframeタグ
コードなどの記載で使われる preタグ
などですが、positionで指定ミスで検証ツールやandroidで見ていても横揺れは発生しないのに、iphoneのみ発生してしまう、厄介な現象もあるので、注意が必要です。
なので、対策としてコードなどの記載で使われる [pre]タグでは
1 |
.sample { overflow: auto; } |
1 |
.sample { word-wrap: break-word; } |
広告が原因で横揺れしているケースでは、
広告作成時に「レスポンシブ」を選択することが一番です。
コメント