レスポンシブWebデザインのスマホの横揺れ

題名を見て「?」って思われた方も多いかと思います。
IT系の内容なので、興味のある方だけ読んでください。


「レスポンシブWebデザイン」には、1つのウェブサイトを多様なデバイスで閲覧したとき、同様に見えるように配慮することが含まれます。あらゆるデバイスで、ユーザビリティと満足を確保するデザインは「難しい」と感じることもあります。

(※デバイス:スマホ、パソコン、タブレットなど)

レスポンシブWebデザインでありがちなことは、スマホで見たときに画面の横揺れが発生する場合があります。どの様な現象か動画で見てみましょう

ページの情報量が多い場合、この様な横揺れが発生すると見づらいですよね。

対策方法は、cssという「ウェブページのスタイルを指定するための言語」のファイルに下記を追記することで、解消されます。

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

何が書かれているのか、わかりませんよね。わからなくて大丈夫です。
興味がわいたとき、調べれば良いと思います。


再度、動作を確認してみましょう。

スマホの横揺れが解消されましたね!

ここまで読んでくださり、ありがとうございます。

by 池サポIT部