ブルーシュ

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

作者の似顔絵

プログラミング歴19年🌈調べたことをブログにまとめていきます。
記事の感想・質問・間違い指摘などはツイッター ( @blooshcompany ) へお願いします。

秋田のウェブ活用をサポート

ホームページを自作してコスト削減!秋田の事業者は無料で利用できます。
ネットショップ・WordPress・SEO対策などさまざまなお悩みをサポートします。

その他、フロントエンド案件のご依頼はインフォメーション

秋田市 レンタル着物 笹パンダ堂のバナーリンク