iPhone(safari)では大丈夫なのに、Androidは余白が!!!
パソコンでの開発では出なかったのですが、
実機チェックした時、
Android端末では、以下のような空白ができました。。。
chromeだけでなく、chatworkやslackのプレビューでもこの空白ができました。
原因
スマホの時、htmlを「font-size: 62.5%;」にしていなかったためです。
これは「ルートのフォントサイズ」で、
あるサイトにはこう書いていました。
font-size: 62.5%;は呪文みたいなもの」
[引用][css]html, bodyのfont-sizeはいくつにしてる?~よく見る62.5%ってなに!?~
有無を言わずに入れとけ!ということですね。
対処法
とはいえ、全部のフォントサイズを変えるのは大変なので、
以下のように応急処置しました。
ポイントは、htmlとbody両方にoverflow-x: hidden;を入れること。
※overflow:hidden;にすると、スクロールできなくなります。
@mediascreenand(max-width:768px){//スマホ時html{font-size:90%;//自分が設定したい大きさでoverflow-x:hidden;}body{overflow-x:hidden;}}