Bloosh Company

Development>フロントエンド

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 #レスポンシブ

<<次の記事

WordPressでRetinaディスプレイ対応(プラグインなし)

前の記事>>

WordPressの画像情報を取得する方法!

Tweets by blooshcompany