デバイスピクセル比

WindowプロパティのdevicePixelRaitoは現在のディスプレイにおけるCSS解像度と物理解像度の比を返します。

【引用元：MDN Web Docs】https://developer.mozilla.org/ja/docs/Web/API/Window/devicePixelRatio

主に、JavaScriptのページですが、ここではJavaScriptの知識は扱いません。
デバイスピクセル比は、パソコンの画面のCSS解像度と物理解像度の比ですよ！って言っています。
CSS解像度と物理解像度って単語がやっかいそうです。
英語を翻訳しているので、このような単語があるのかは疑問ですがw

とりあえず、日本語だとあんまりイメージができないので、単位に直してみます。

前回、勉強した復習ですが、
解像度は、1インチの中にどれぐらいピクセルさんたちが詰まっているの？っていう密度のことでした。
単位は、「ppi」か「dpi」です。
密度ってことは、さらに単位を分解できそうな気がします。

ppi = px ÷ 1in
「1インチの中に占めるピクセルさんの割合」です。

ここで、何か思いつくでしょうか。

「ppi」は、解像度です。
これは、計算結果なのでいじっちゃったらダメっぽいです。
計算結果が変わるってことは、その計算式の中身も変わっちゃうってことなので。
それなら、計算式の中身を直接いじったほうが分析しやすいです。

前回の勉強の復習ですが、
「1インチ」は、絶対単位です。
これもいじってはダメそうな気がします。
「cm」とか「㎜」とかの単位はいじれません。
もしいじったら、何か世界の常識までも変えてしまいそうです。
すると、どうやら「px」って単位が怪しいです。

ピクセルには、２つ種類がありました。
「CSSピクセルさん」と「デバイスピクセルさん」です。

前回の勉強の復習ですが、
「CSSピクセルさん」は、
絶対単位ではあるんだけど、
唯一仲間外れにされてて、視野角単位にも分類されていました。
これは、視野角を用いた参照ピクセルさんを参考にしたピクセルさんのことでした。

「デバイスピクセルさん」は、
私たちが使っているパソコンやiphoneの画面の中に敷き詰められた物理的なピクセルさんたちのことでした。
工場でパソコンやiphoneが製造される時に、しっかり決まった長さで製造されます。
つまり、既に固定された物理的な長さです。

これら2つを使って、CSS解像度と物理解像度を言い換えてみましょう。

「CSS解像度」は、どうやらCSSに関係する解像度っぽいので、「CSSピクセルさん」が担当しそうです。
「物理的解像度」は、どうやら物理的な何かに関係する解像度なので、「デバイスピクセルさん」が担当しそうです。

「CSS解像度」 = ppi = CSSピクセル（px） ÷ 1インチ = 「CSSピクセル / 1インチ」
「物理的解像度」 = ppi = デバイスピクセル（px）÷ 1インチ = 「デバイスピクセル / 1インチ」

さらに、言い換えます。

デバイスピクセル比は、
「CSSピクセル / 1インチ」と「デバイスピクセル / 1インチ」の比、

言葉ではイメージできなかった部分が、なにか少しすっきりした気持ちになります。
さらに、「1インチ」という単位はどちらも同じなので、取ってみます。

デバイスピクセル比は、
「CSSピクセル」と「デバイスピクセル」の比

そのままテストの解答用紙に書いてもよさそうな一文になった感じです。

これは物理1ピクセルの大きさに対するCSS1ピクセルの大きさの比率と考える

【引用元：MDN Web Docs】https://developer.mozilla.org/ja/docs/Web/API/Window/devicePixelRatio

デバイスピクセル比は、
デバイスピクセルの大きさ （1px） に対する、CSSピクセルの大きさ （1px） の比率と考える。

これも式で表したほうがイメージつきそうです。

「デバイスピクセル （1px） ： CSSピクセル （1px）」

この値が 1 であることは、それが伝統的な 96 DPI (プラットフォームによっては 76 DPI) であることを意味し

2 であることは、HiDPI やレティナのディスプレイであると考えられます

【引用元：MDN Web Docs】https://developer.mozilla.org/ja/docs/Web/API/Window/devicePixelRatio

デバイスピクセル比が「1 ： 1」ということは、
伝統的な解像度96dpiのパソコンを使っていますね！ってことを意味しているようです。

ここで新たな謎です。

「解像度96dpiの伝統的なプラットフォーム（パソコン）」とは何のことをして意味いるのでしょうか。

OSの解像度ー解像度96dpiの伝統的なプラットフォームのお話

ここからまた、前回の勉強に加えて、「OSの解像度」のお話がでてきます。
解像度の概念がさらに増えるので、お話はさらに複雑になってきますw

ただ、デザイナーさんとコーダーさんの連携において、重要なお話になってくるところだと個人的には思っているので、理解しておくといいかもしれません。

通常、良好な視認結果を得られるドット密度としては、コンピュータ用ディスプレイにおいては72dpiから96dpi程度が想定されている場合が多い

後発のモダンなGUIツールキットでは、ディスプレイDPIに依存した物理ピクセル（デバイス依存ピクセル）ではなく、ディスプレイDPIに依存せず物理的なサイズが常に一定となる論理ピクセル（デバイス非依存ピクセル）の概念を導入し、OSのDPI設定と連動することで高精細ディスプレイに対応している

【引用元：フリー百科事典 ウィキペディア】https://developer.mozilla.org/ja/docs/Web/API/Window/devicePixelRatio

いきなり「dpi」の引用です。
ウィキペディア？と思われるかもしれませんw
「OSの解像度」に関して、明確に説明してくれている信頼あるソースが見つかりませんでしたのでw

なので、まずは、「解像度の単位」まで単語をブレークダウンして検索し、「OSの解像度」に関連がありそうな文言を見つけます。

今のところ、みんな大好きウィキペディアさんが唯一のソースですw

「良好な視認結果を得られるドット密度」というお言葉から、
「視野角」という単語が連想れさます。

「コンピュータのディスプレイ」では、「96dpi」が想定されているようです。

「デバイス依存ピクセル」は、デバイスピクセルのこと。
「デバイス非依存ピクセル」は、参照ピクセルという概念を参考にした独自の論理ピクセルのこと。

前回の復習ですが、どんな画面解像度のデバイスでも快適に閲覧できるように、「参照ピクセル」という概念がありました。その概念を参考にしたものの一つが「CSSピクセルさん」でした。
デベロッパーさんたち（プログラマー）は、これをCSSピクセルではなく、「Dip」などといろいろな名称で呼んでいたりします。

人、立場によって、論理ピクセルには、独自に名前が付けられています。
当然、パソコンやiphoneの種類によって、画面のサイズや画面解像度、解像度は異なります。
解像度96dpiの画面ではない場合、CSSピクセルの大きさはデバイス毎に大きく変わってしまいます。
それだと、ユーザーにとってフレンドリーではありません。

そこで、「デバイス非依存ピクセル」という概念上の論理ピクセルを使い、
「OSの解像度（DPI）」と連動させて、
どんなディスプレイでも快適に閲覧できるように表示させることができるようになったようです。

ここでやっと、「OSのdpi（解像度）」という新しい解像度の概念が登場し、
考察するための糸口が見つかりました。

OSによっても解像度が決められているようです。

この数字は、1981年発売のXerox Starで72dpi（1984年発売の初代Macintoshが同じ72dpi）、1985年発売の初代Microsoft Windowsで96dpiが標準とされたことに由来する

Adobe PhotoshopなどMacintosh由来のソフトウェアが多用されるグラフィック業界では特に72dpiが標準とされる場合が多い

【引用元：フリー百科事典 ウィキペディア】https://developer.mozilla.org/ja/docs/Web/API/Window/devicePixelRatio

どうやら、解像度96dpiの伝統的なプラットフォームは、
Microsoft Windowsさんが初めてパソコンを製造するときに考案したようです。

それが、「解像度96dpiの伝統的なプラットフォーム（パソコン）」です。

他のOSについても見てみます。

Macintoshのことは知っていますか？
誰でも必ず一度は口にしたことがあります。
Apple製品の「Mac」のことです。
Appleさんは、解像度72dpiの伝統的なプラットフォーム（パソコン）を用いていたようです。
技術進歩に伴い、解像度96dpiよりも高い解像度に対応するために、「デバイス非依存ピクセル」という概念を使い始め、今に至ります。

Appleさんの「Cocoa Drawing Guide」が参考になります。
http://www.mosa.gr.jp/wp-content/uploads/2007/01/cocoadrawingguide.pdf

前回の勉強の復習ですが、
72dpiは、絶対単位でした。

1pt = 1 / 72in
です。

以上から、Appleさんのパソコン（以下、Mac）では、
W3Cさんの物理単位の定義が少し異なることになります。

1in = 2.54cm = 25.4mm = 72pt = 72px
です。96pxではありません。

この点について残念ながらW3Cさんは言及していません。
ちょっと謎ですw

この違いは、CSSピクセルをディスプレイで表示させた時に、どう影響してくるのでしょうか。

AppleさんのOS（Mac）を使って、CSSファイルに書いたCSSピクセルさんは、
Windowsさんの画面で表示させた時と、
Appleさんの画面で表示させた時で
長さ（大きさ）が違ってくるのは明らかです。

この素朴な疑問に間接的に考える余地を与えてくれたのが、Microsoft Windows開発者さんのページでした。

ドットという用語は、インクの物理的なドットが紙に置かれる印刷に由来します

コンピュータディスプレイの場合、論理インチあたり96ピクセルと言う方が正確ですが、DPIという用語は定着しています

実際のピクセルサイズは異なるため、あるモニターで読み取れるテキストが別のモニターでは小さすぎる可能性があります

72ポイントのフォントは、1論理インチの高さであると定義されています

【引用元：Microsoft Windows 開発者】https://developer.mozilla.org/ja/docs/Web/API/Window/devicePixelRatio

前回勉強したことがたくさん盛り込まれていて、いい感じです。

私たちは、CSSファイルに、font-size: 72ptと書きました。
絶対単位では、
1in = 2.54cm = 25.4mm = 72pt = 96px
と定義されています。
つまり、72ptは、1inの長さ（大きさ）です。

次に、論理インチがピクセルに変換されます

長年、Windowsは次の変換を使用していました

1論理インチは96ピクセルに相当します

この倍率を使用すると、72ポイントのフォントは96ピクセルの高さでレンダリングされます

12ポイントのフォントの高さは16ピクセルです

この倍率は、96ドット/インチ（DPI）として表されます

【引用元：Microsoft Windows 開発者】https://developer.mozilla.org/ja/docs/Web/API/Window/devicePixelRatio

WindowsのOSの場合、
絶対単位で換算されて、
1in = 96px
になります。

つまり、CSSファイルに72ptと書いたけど、
96pxの長さで表示されます。

この倍率は、
96px ÷ 72px ＝ 1.3333333333…. 」
約1.3倍です。

この倍率のことを、
解像度「96dpi」と呼んでいます。

長年、この換算を行ってきたが、
96dpiよりも高い解像度でも快適に表示させるために、
論理ピクセルという概念を使い始めたようです。

さすが、わかりやすいです。

Appleさんの場合はもう察しがつくかと思います。
OSの解像度は、72dpi。
W3Cで定義されている絶対単位をAppleさん用に直すと、
1cm = （ 72px ÷ 2.54 ） px
1in = 2.54cm = 25.4mm = 72pt = 72px
1px = （ 1in ÷ 72 ）in

AppleさんのOSの場合、
CSSファイルに72ptって書くと、
72pxの長さのフォントが表示されます。

どうやら、この違いが、
デザイナーさんとコーダーさんの連携を難しくしている要因の一つと考えられます。

解決方法については、他の記事でいろいろと試行錯誤されているようなので、割愛します。
プロジェクト毎に方針なども違いますしね。

一応、Windowsさんもその違いに関しては気にしているようです。

GDI描画はピクセル単位で測定されます。

つまり、プログラムがDPI対応としてマークされていて、GDIに200×100の長方形を描画するように要求すると、結果の長方形は画面上で幅200ピクセル、高さ100ピクセルになります。

ただし、GDIフォントサイズは現在のDPI設定に合わせて調整されます。

つまり、72ポイントのフォントを作成すると、フォントのサイズは96 DPIで96ピクセルになりますが、144DPIでは144ピクセルになります。

これは、GDIを使用して144DPIでレンダリングされた72ポイントのフォントです。

【引用元：Microsoft Windows 開発者】https://developer.mozilla.org/ja/docs/Web/API/Window/devicePixelRatio

GDI描画という技術を使ったから、解像度144dpiに設定すれば、Macと互換性はとれるよ！と言っています。

確かに、絶対単位として、「1pt ＝ 72dpi」であるならば、
基準ピクセルさんも「1px = 72dpi」としてくれたほうが、
直感的にずっとわかりやすい気がしますw

実際のピクセルサイズは異なるため、あるモニターで読み取れるテキストが別のモニターでは小さすぎる可能性があります。

また、好みは人によって異なります。

大きなテキストを好む人もいます。

このため、WindowsではユーザーがDPI設定を変更できます。

たとえば、ユーザーがディスプレイを144 DPIに設定した場合、72ポイントのフォントの高さは144ピクセルになります。

標準のDPI設定は、100％（96 DPI）、125％（120 DPI）、および150％（144 DPI）です。

Windows 7以降、DPIはユーザーごとの設定です。

【引用元：Microsoft Windows 開発者】https://developer.mozilla.org/ja/docs/Web/API/Window/devicePixelRatio

Windowsさんを使っている人なら、ディスプレイの設定画面にいけば、拡大縮小のレイアウトの項目で、○○％を選べると思います。

このプルダウンメニューの中で、150%（推奨）って書いてあるのがわかりますか？

150% ÷ 100% = 1.5
96dpi × 1.5倍 ＝ 144dpi
つまり、この150%（推奨）を選べば、144dpiに設定できます。
推奨と書いてある意味がここにあるのかな、なんて思ったりします。

ちなみに、私のノートパソコンは14インチと小さめなので、150％にするとWebサイトが拡大されすぎて、ちょっとしか映りませんw
スクロールしまくりなのがストレスなので、100%に設定していますw

画面が大きい人は、150%にしてみると、
フォントサイズとかの面で、
Macさんとの互換性が得られるかもしれませんね。

W3Cさんも参照ピクセル（基準ピクセル）の説明のところで、解像度96dpiについて少し言及しています。

この変更は、あまりにも多くの既存のコンテンツが96dpiの仮定に依存するために行われた。この前提を壊すことはコンテンツを壊すことになる。

【引用元：Microsoft Windows 開発者】https://developer.mozilla.org/ja/docs/Web/API/Window/devicePixelRatio

W3Cさんも、デバイスの解像度は96dpiだけじゃないんだよ！ってことに気づいたけど、
世界中が解像度96piの前提に基づいてコンテンツを制作してきたから・・・。と言っています。

余談ですが、

ドットという用語は、インクの物理的なドットが紙に置かれる印刷に由来します。

【引用元：Microsoft Windows 開発者】https://developer.mozilla.org/ja/docs/Web/API/Window/devicePixelRatio

印刷する時の見栄えを気にして、96dpiに設定したらしいです。

コンピュータディスプレイの場合、論理インチあたり96ピクセルと言う方が正確ですが、DPIという用語は使用されていません。

【引用元：Microsoft Windows 開発者】https://developer.mozilla.org/ja/docs/Web/API/Window/devicePixelRatio

一応、ディスプレイとして考える場合は、96ppiの方が正しいよ！って言ってます。
伝統的に「dpi」という単語が使われてきたため、仕方なく「dpi」を使っているのでしょう。

まとめ

■デバイスピクセル比は、「CSSピクセル：デバイスピクセル」だよ！

■OSの解像度はWindows: 96dpi、Mac: 72dpiだよ！

■技術進歩によって、OSの解像度も画面解像度もいろいろな数値がでてきたよ！
それに対応するために、参照ピクセルって概念を参考にして、論理ピクセル（CSSピクセル、デバイス非依存ピクセル、GDI、Dipなど）っていう、概念上のピクセルが登場したよ！

■論理ピクセルのおかげで、いろいろなデバイスでも、文字が同じような文字の大きさで表示されるよ！

■あくまでも、画像に関しては（画質の良し悪しは）、画面解像度が担当するよ！

■OSの解像度は、文字の大きさに関係してくるよ！