2013-06-20

縮小したら文字が大きく

スクリーンサイズに応じたフォントサイズの変更はかなり読みやすくなるアイディアだと思っていて、ここでもずいぶん前から使っている。が、ブラウザーのズームと相性が非常に悪く、縮小したつもりが文字サイズが大きくなったみたいなことがよく起こる。このウェブサイトでもネタ元のウェブサイトでも起こる。

最初はMedia Queriesのブレークポイントでem単位を使うとおかしくなるのかと思ってて、その気になればすぐ直せると思ってたけど全然違った。ズーム機能によって閲覧領域自体が仮想的に変化するということが原因だった。

以下の様な簡単なフォントサイズ調節CSSを例にする。数字にはあんまり意味はない。

@media (min-width: 960px) {
  html {
    font-size: 20px;
  }
}

このCSSが指定されているHTMLページを900pxの幅で開いてからズームで90%に縮小するケースを考えると、閲覧領域が1000px (900px * 10 / 9)に拡大されるので、ブレークポイントを超え、フォントサイズが20pxになる。つまりズームで縮小したのにもかかわらず文字サイズは拡大されるという非常に違和感のある結果になってしまう。

対処法を色々考えていて、デバイスやブラウザーで固有だったり固定されたりしない媒体特性(media features)ではないresolutionを使うとうまくいきそうな気配がある。

@media (min-width: 960px) and (resolution: 96dpi) {
  html {
    font-size: 20px;
  }
}

Windowsのデフォルトでは96dpiだけどズームによってその値は変化するので、こうするとズーム機能が初期状態でない場合は基本フォントサイズの変更が起きなくなる(Windows上のFirefox 21でうまく機能する)。ズーム機能使う人には余計なお世話っぽいので提供しなくて良さそうと考えると、この方向性は間違ってないような気はする。しかし星の数ほどあるresolutionの値に対応して実装するのはちょっと無理があるので、うまい方法を考えている。

……無さそうだ。