ブラウザのズーム機能とpxの関係って何？
ブラウザのズーム機能って一体何をしているのか？
その答えはここにかなり詳しく書いてある。
CSS Pixel
まずは「CSS Pixel」という概念について理解するとこの後の話の理解がスムーズに進む。
スタイリングの際に使用するサイズの単位であるpxだが、これは実際の物理ディスプレイに対応した値ではない。
ブラウザは、いまユーザーが利用しているディスプレイの解像度が96dpiであるかのように振る舞う。逆に言うと、ユーザーは解像度が96dpiの仮想ディスプレイを通じてHTML文書（Webページ）を閲覧していると考えることができる。
その結果、CSSで記述する1pxとはその仮想ディスプレイ上における1pxのサイズを表現しており、これをCSS Pixelと呼ぶ。
devicePixelRatio
ところで、windowインターフェースにはdevicePixelRatioというプロパティが存在する。このプロパティは数値型のプロパティで、1CSS Pixelの描画に必要な物理ピクセルの数を保持している。
ブラウザのDevToolsのコンソールにおいてdevicePixelRatioと入力すると、3がコンソールに表示されることがある。
この場合、1CSS Pixelは物理ディスプレイへの描画時に3物理ピクセルが必要となることを示す。
devicePixelRatioとズーム機能
このdevicePixelRatio値は、ブラウザのズーム機能の影響を受ける。
- 例えば、自分が使っているArcブラウザの拡大率がデフォルト値である100%の状態で
devicePixelRatio値を確認すると、2が表示された。 - ここで、ブラウザの拡大率を75%に変更して
devicePixelRatio値を確認すると、1.5と表示された。 - 次に、ブラウザの拡大率を125%に変更して
devicePixelRatio地を確認すると2.5と表示された。
この事から、ブラウザのズーム機能が一体何をしているのかが考察できる。
ブラウザのズーム機能は、CSS Pixelと物理ピクセルの変換比率を変更しているのだろう。
この結果から、ズーム機能を使ってブラウザの拡大率を300%に変更すると、devicePixelRatio値は単純計算で6になるはずだが…私の環境では実際その通りになった。
参考
