Designed item on Suzuri 👔

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

ウェブ
Photo by Alvaro Reyes on Unsplash
この記事は約1分で読めます。

*引用シェア歓迎です。リンクを記載し自由にご使用ください

クリブログ

 

レスポンシブデザインで設計してあるウェブサイトでも、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で強制的に補正しているため、まずはコンテンツの幅を確認したうえで使用しよう。

コメント