ブルーシュ

IT技術の勉強記録

ホーム > Tips > フロントエンド

Safariでremが効かない

, ,

文字サイズや要素間の隙間がパソコンの画面ではちょうどよくても、スマホで見ると大きすぎたり空きすぎたりするんで、サイズ指定にremを使ったりします。
(モバイルファーストだろというのは置いといて)
 
先日なぜか、iPhoneのSafariでは効かなかったんです。
 
CSSはこんな感じで書いてました。


html{
	font-size: 62.5%;
}body {
	font-size: 1.6rem;
}

@media screen and (max-width: 480px){
	html{
		font-size: 31.25%;
	}
}

こうすると、margin-top:10rem;とか書いたところは、通常は100pxのスペースが空き、画面幅480px以下なら50pxのスペースになるはず。
 
でもなぜかSafariだけ効かなくて・・・
html要素にこれを付け加えたら動きました。


html{
	font-size: 62.5%;
	text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
}

text-size-adjustについて詳しい説明はこちら
100%に設定すると、拡大縮小しないってことみたいです。
 
ちなみにどのデバイスでもサイズを変えてほしくないところはpxで指定してます。
例:borderの幅、12px以下の文字サイズなど。

Safariでremが効かない #フロントエンド #ウェブデザイン #ウェブ制作 #WEBデザイン #WEB制作 #css #レスポンシブ #safari

作者の似顔絵

秋田市在住のプログラマーです。
プログラミングを始めて18年、まだまだ日々勉強。調べたことをブログにまとめていきます。
記事の感想・質問・間違い指摘などはツイッター ( @blooshcompany ) へお願いします。