ブラウザによってフォントサイズが変わる問題の対処法

またWEBの記事です。
レスポンシブ関連で最近は書いてきましたが、備忘録としてスマホ含めてたまにあったフォントサイズへの対処法をご紹介します。

ぺージを戻るとスマホで文字サイズがでかくなる

スマホサイトでなぜか、普通に表示されていた文字が、ページを戻ると大きくなってしまう現象です。
調べたら一発でたくさんでてきたので、よく起こることみたい…？


スマホ用のCSSのbodyに一つ追加するだけで直りました。

 body{ -webkit-text-size-adjust: 100%; }

たぶんデバイス依存のせいなので、横幅のサイズ認識を100%にする？的な指定かと思います。。

GoogleChromeで文字サイズ10px以下に指定できない

Chromeだけなぜか、文字のサイズを10px以下…例えば8pxと指定をしても、10pxで表示されてしまいます。
スマホサイトなど、注釈やそこまで大きくなくて良いという文字だってありますよね…。
それなのに、10pxになってしまうものだから、、、8pxを指定していたら、10pxになってしまうと2pxも違ってきます。
そうなると、意図していない大きさになってしまいますよね。

p {
font-weight: 600;
font-size:10px
-webkit-transform:scale(0.9);
-moz-transform:scale(0.9);
-ms-transform:scale(0.9);
-o-transform:scale(0.9);
transform:scale(0.9);
}

上記で9pxくらいの表示になりました！
10pxを起点とし、そこから9pxになるよう0.9縮小して表示させているんですね。




こちらの記事がとても参考になります！！
memocarilog.info


IE9以下にも対応されていたりと、ものすごく親切に、なぜこうしているのか、という解説もされていて、とってもわかりやすいです。

以上、フォントサイズが変わってしまう場合のあれこれでした。
対処法があるとはいえ、やはりデバイスによってフォントの違いもあるので、絶対にこの大きさになる！！とは言い切れないですね。
それも見越した上でデザインできるのが一番良いですが、いやはや、webデザイナー、骨折りですね・・・・。。。