Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8825

スマホを横向きにした時の右余白を消したい!

$
0
0

症状

iPhoneなどのスマホを横向きにした時に、
右側に余白が出来ることがあります。

「そんな余白を消したい!!」

という時の対処法です。

対処法

1.画面右側からはみ出ている要素がないか確認する。はみ出ていれば修正する。
2.viewportの指定を確認する
3.htmlタグ、bodyタグにwidth: 100%;が指定されているかを調べる。されていなかったら指定する。
4.bodyタグにmin-width: 100%;を指定する。

手順1

1の方法で問題なければバンザイです。
2へ進む必要はありません。

手順2

2については、最低限下記を指定します。

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">

initial-scale=1minimum-scale=1の記述が抜けていることがあるので、
抜けていたら追加してください。

手順3、4

2を完了したあと、手順3、4を確認します。
3で問題なければ4の対応をする必要はありません。

とりあえず、私はこれでなんとかなりました。
よかった。

参考サイト

終わりに

取り急ぎ、備忘録として。
以上です。


Viewing all articles
Browse latest Browse all 8825


<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>