題名を見て「?」って思われた方も多いかと思います。
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部