koba::blog

小林聡: プログラマです

Safariの文字サイズ問題にとりあえず対処する

ブラウザデフォルトの文字サイズというのは、各人がそれぞれ見やすい大きさを設定していると思うので、私は尊重すべきと思っています。なので CSSでもpx単位の font-size の指定は大嫌いでした。

しかし、現在のSafariにはデフォルトの文字サイズを変更する方法がありません。 Safariのデフォルトの文字サイズを変更する - koba::blog で自分自身の文字サイズはなんとかしたのですが、こういう設定をしていない人にとって、font-size: 12px とかしていないページの文字はたぶんデカすぎる。

しかたがないので、涙をのんで自分のWebページに以下の設定をしました。

@media screen and (min-width: 640px) {
    body { font-size: 12px; }
}

最初にへんな「おまじない」がついているのはスマートフォンには適用したくないから。viewport を指定してスマホでもPCでも同じページで見やすく表示するように工夫している*1ので、この場合 12px だと豆粒のような文字になってしまう。なのでとりあえず画面幅が 640px 以上の場合にだけ適用したという訳です。

自分の環境ではうまくいってるようだけど、タブレットとかではどう見えてるか不安。最近のスマホは画面がデカいからなあ。

*1:レスポンシブデザインっていうんですか?まあどうでもいいや