文字サイズや要素間の隙間がパソコンの画面ではちょうどよくても、スマホで見ると大きすぎたり空きすぎたりするんで、サイズ指定に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以下の文字サイズなど。