fontsize

DESIGN

androidとiOSでフォントサイズが変わってしまう場合

  • ARTICLE - No.39
  • issue-
  • 1,119 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さんの記事です!

LATEST_

ABOUT ME_

アラツ ケイスケ :
福岡県糟屋郡志免町在住。畑で野菜を育てて生きていきたいwebデザイナー。嫌いなものはクチャラー。1984年10月生まれ。昨年三十路デビューしました。音楽とB級映画をこよなく愛す一面、垂れ流すだけで何を聞いたか観たのか全く記憶にないこともしばしば。(大抵寝落ちしてるか、本を読んでます。)
このブログでは自分が書きたい音楽の事やデザインの事、福岡の事を好きなように書いて行くつもりです。記事掲載のご相談も受け付けますのでどうぞお気軽に。随時受け付けます。僕がバテあがってたらお返事までお時間掛かると思いますが悪しからず。

→CONTACT