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

スマホの時、htmlをfont-size:62.5%;にしないと画面に余白ができる

$
0
0

iPhone(safari)では大丈夫なのに、Androidは余白が!!!

パソコンでの開発では出なかったのですが、
実機チェックした時、
Android端末では、以下のような空白ができました。。。
chromeだけでなく、chatworkやslackのプレビューでもこの空白ができました。
スクリーンショット-2020-09-15-14.24.58.png

原因

スマホの時、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;}}

Viewing all articles
Browse latest Browse all 8578

Trending Articles



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