DESIGN
androidとiOSでフォントサイズが変わってしまう場合
- ARTICLE - No.39
- issue-
- 10,054 views
Posted by Keisuke Aratsu
POP1280
スマホサイトをコーディングしている時にandroid(chrome)で検証しつつ進めていると、iPhone(safari)であまりにもフォントサイズが違いすぎる事に気付きました。今までこんなにも違う事あったっけな？？と思うくらいに違いがあったので調べてみるとどうやらviewportの指定に原因があるそうな。簡単にいうと数値を指定したり、そもそもviewportが設定されていない時にこの現象が起こるっぽいです。そして僕はandroidで検証していたので、iPhone側に問題があると思っていましたが、どうやらその逆でandroid側に問題があった模様。
viewportを数値で設定するとよくない
この現象ですが上にも書いてある通り、viewportを数値で指定するとダメなようです。もしくはviewportの設定をしていない場合しかり。
解決策はあって、文字サイズがバグっている要素に対して
hogehoge{max-height: 100%;}
を指定してあげると解消されます。
ただ一々CSSをあてていくのも面倒なのでviewportに数値入れないのが一番なのかなとは思います。
コーディングする時、テンプレートを共有されることもあると思うのでそういう場合はあらかじめviewportが記述されていることもあると思います。そんな時は上記のCSSを書いてあげるといいですね。
コーディングしてて何が起こったか分からなくてちょっと焦りました。
今回参考にさせていただいたのはSEO modeさんの記事です！
