【CSSのみでOK】スマートフォンでウェブサイトが横揺れするのを完全に防ぐコード

レスポンシブデザインで設計してあるウェブサイトでも、PaddingやMarginなどの関係から横揺れしてしまうことがある。

まずは、「画像 / 動画 / テーブル / スクリプトがレスポンシブになっているか」、コンテンツが「max-width: 100%; 」に設定されているかなど基本的な部分を確認してほしい。

それでも、ウェブサイトがグラグラと横揺れしてしまう時は、強制的にCSSで補正できる。

以下のコードは、「480px以内の画面では、横にはみ出しているものを非表示とする」という設定だ。

なぜ480pxかということは言うまでも無いが、スマートフォンの最大画面幅が480pxだからである。


@media screen and (max-width : 480px){
	html,
	body {
	overflow-x: hidden;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
	}
}

CSSで強制的に補正しているため、まずはコンテンツの幅を確認したうえで使用しよう。

Default image
Keisuke Kuribara
零細企業の代表 / ウェブマーケティング、コンサルティング、EC / 漫画と本が好き / 生物捕獲が趣味