Firefoxでwindow.screen.widthしたときの値はCSSピクセル
ディスプレイサイズの挙動についてのメモ。自宅で作業する時には何年か前に買ったLGの23.8インチのディスプレイを使っている。解像度は3840×2160だが，小さすぎて見づらいで普段は半分の1920×1080に落として使っている。
この状態でディスプレイの解像度を取得しようとしてブラウザのコンソールでwindow.screen.widthをするとなぜか540と表示され，window.screen.heightは960と表示された（ブラウザはFirefox）。
システム設定から解像度は3840×2160に変更してからwindow.screen.widthとwindow.screen.heightをすると正しく3840と2160と表示される。いったいさっきの数値はどこから来たのか。
https://scrapbox.io/files/68540a6e8b8d646829dfa0c8.png
（追記: 職場のMacだとブラウザ間で挙動の違いがなかったりするので，ちょっとよくわかっていません）
ちなみにこの問題はGoogle ChromeとSafariのコンソールだと生じなかったブラウザによって挙動が違うのは気持ち悪いし，この値に基づき何かをするというは危ないのかもしれない。
この問題とは別の話になるがブラウザのズームをするとwindow.screen.widthの値も変わる。例えばブラウザでズームを120%にすると540だった値は1.2で割った450になる。この挙動についてもFirefox特有のものでSafariやGoogle Chromeでは生じない。
この問題はブラウザが取得しているものがCSSピクセルとデバイスピクセルで異なっていることに起因しているのかもしれない。以下のサイトを読むとCSSピクセルというのは複数のデバイスピクセルからなる一つの擬似的なピクセルのことらしい。
擬似的なピクセルにデバイスピクセルが何個入っているかはwindow.devicePixelRatioで取得できるらしい。先ほどの環境下で実際に確かめてみると，2と出るので2×2の4デバイスピクセルで，1つのCSSピクセルを構成していると分かる。
最初に出てきた960と540はCSSピクセルであり，デバイスピクセルとしてはその2倍つまっている訳なので，1920と1080になる。値については，設定している解像度に一致する。
widthとheightが入れ替わっていることについては，サブディスプレイが悪さをしているらしい。色々といじってみたところ，拡張ディスプレイとして縦長に設置しているものを90度回転して使用していることがどうやら原因のようである。システム設定から拡張ディスプレイの回転を標準に戻したら，メインのディスプレイの方は見た目は変わっていないがコンソールでwidthが960，heightが540になった。謎すぎる。