縮小したら文字が大きく

スクリーンサイズに応じたフォントサイズの変更はかなり読みやすくなるアイディアだと思っていて、ここでもずいぶん前から使っている。が、ブラウザーのズームと相性が非常に悪く、縮小したつもりが文字サイズが大きくなったみたいなことがよく起こる。このウェブサイトでもネタ元のウェブサイトでも起こる。 最初はMedia Queriesのブレークポイントでem単位を使うとおかしくなるのかと思ってて、その気になればすぐ直せると思ってたけど全然違った。ズーム機能によって閲覧領域自体が仮想的に変化するということが原因だった。 以下の様な簡単なフォントサイズ調節CSSを例にする。数字にはあんまり意味はない。 @media (min-width: 960px) { html { font-size: 20px; } } このCSSが指定されているHTMLページを900pxの幅で開いてからズームで90%に縮小するケース