スマホ閲覧時に画面が左右にグラグラする不具合を一発解消

1月29

2024-01-29 by スキマデザイン

スマホでホームページを閲覧しているときに、指でスクロールすると画面が左右にグラグラして見辛いこと、たまにありますよね？
これは、レスポンシブ対応しているWEBサイトなのに、左右幅100%のルールを超えるコンテンツがブロック内に含まれてしまっている時に出る不具合です。

じゃあ、はみ出したコンテンツを適正な幅に修正すれば解決！

なんですけど、そのコンテンツが何かわからない時や、複雑な仕様のサイトの場合、修正が難しい場合も多々あります。
そんな時、難しい作業なしで、その問題を一発で解消する、便利なコードがあります。

html（php）に記述

<body>
<div class="wrapper">

</div>
</body>

<body>タグの内側に新しいブロックを追加します。

ここでは、クラス名をwrapperとして記述しています。

新しいブロック要素を追加しないで、直接下記CSSをbodyに適用してもいいのですが、

その場合、レイアウトが崩れたりすることがよくあるので、新規ブロックを追加することをおすすめいたします。

div.wrapper {
overflow:hidden;
}

追加したブロックにoverflow:hidden;を指定します。
「overflow:hidden;」は、ブロックの幅をはみ出した部分を非表示にするCSSです。

ただ、これは「応急処置」的な意味合いもある方法になりますので、

やはり、レスポンシブに沿ってきちんとサイト構築することを推奨します。

でもそれが難しい場合にはぜひご活用ください。