「Retinaディスプレイ」
ようやく、「画像のRetinaディスプレイ対応の知識」シリーズが大詰めになりました！
Retinaディスプレイ
Retinaディスプレイとは、AppleがiPhone 4で初めて採用した独自の高精細ディスプレイの名称である。
Retinaディスプレイの特徴は画面解像度の高さにある。
iPhone 4の画面サイズは前モデルのiPhone 3GSと同じ3.5インチのままであるが、Retinaディスプレイの搭載によって解像度は320×480ピクセルから960×640ピクセルに、つまり4倍になっている。
1インチあたりの画素数（ppi）で示すと、初代のiPhoneからiPhone 3Gまでは163ppiだったのに対して、iPhone 4のRetinaディスプレイでは326ppiになっている。
ppiは1インチ幅の中に敷き詰められている画素（ピクセル）の数を示す単位であり、ppiが163から326に倍増していることは、すなわち平方インチにして4倍の密度となっていることを意味する。Retinaディスプレイの画素1個の幅は78マイクロメートルで、ほぼ肉眼では画素を認識できない水準になっている。
【引用元：IT用語辞典バイナリ】https://www.weblio.jp/content/Retina%E3%83%87%E3%82%A3%E3%82%B9%E3%83%97%E3%83%AC%E3%82%A4
Retinaディスプレイ＝高精細ディスプレイ
特徴は、画面解像度の高さ。
縦480px→縦960pxに。（2倍）
横320px→横640pxに。（2倍）
以前の勉強の復習ですが、
画面解像度とは、画面に敷き詰められたピクセルさんの数のこと。
つまり、画面に敷き詰められたピクセルさんの数が4倍に。
ピクセルさんがさらにギュウギュウに敷き詰められて気の毒ですが、
よりきめ細やかな画質を提供してくれるようです。
これもまた、以前の復習ですが、
「1インチあたりの画素数（ppi）」とは、1インチに敷き詰められたピクセルさんの数のこと。
いわゆる「密度」のことでした。
とりあえず、密度ですが、Web上で解像度の話をするときは、「単位」と考えたほうがよさげ、ということでした。
つまり、1インチあたりに敷き詰められたピクセルさんの個数が2倍ということです。
326ppi ÷ 163ppi = 2
ほぼ肉眼では画素を認識できない水準になっている、ということですが、
そもそもその前の水準から肉眼では認識できませんw
どうやら、Retinaディスプレイとは、
1インチあたりのピクセルさんの数（密度）が2倍になった画面。
ピクセルさんの数が4倍になった画面。
ピクセルさんの数が増えたことでよりきめ細やかな高画質を提供してくれる画面。
ということです。
CSS ピクセル解像度に対するディスプレイの物理的なピクセル解像度の比率を表します。
この値が 1 であることは、それが伝統的な 96 DPI (プラットフォームによっては 76 DPI) であることを意味し、
2 であることは、HiDPI やレティナのディスプレイであると考えられます。それ以外の値が返されることもあり、それは一般的でない低解像度のディスプレイの場合や、より考えられるのはスクリーンが標準的な 96 または 76 DPI の解像度の単純な 2 倍よりも高いピクセル密度を持つ場合です。
【引用元：MDN Web Docs】https://developer.mozilla.org/ja/docs/Web/API/Window/devicePixelRatio
以前、デバイスピクセル比について考察した時の引用です。
実は、Retinaディスプレイについての言及がありました。
ここも前回の復習ですが、
デバイスピクセル比とは、
CSSピクセル：デバイスピクセルが、1：1の比率のことでした。
検証ツールのconsole画面に、Window.devicePixelRatioを書いて出力してみます。
この時返された値が、2の時、
つまり、デバイスピクセル比が、1：2の比率の時、
その画面は「Retinaディスプレイ」である、ということでしょう。
さらに、それ以外の値の場合、Retinaディスプレイよりも高い密度を持った画面の可能性が高いですよ！と言っています。
技術進歩によって、画面の密度が3倍、4倍のディスプレイも存在するのでしょう。
Retinaディスプレイとは、
デバイスピクセル比（CSSピクセルさん：デバイスピクセルさん）が、
1：2の場合の画面ということです。
iOSがコンテンツを画面に配置するために使用する座標系は、ディスプレイのピクセルにマッピングされるポイントの測定値に基づいています。
標準解像度のディスプレイのピクセル密度は1：1（または@ 1x）で、1ピクセルは1ポイントに相当します。
高解像度ディスプレイはピクセル密度が高く、2.0または3.0の倍率（@ 2xおよび@ 3xと呼ばれます）を提供します。
その結果、高解像度のディスプレイには、より多くのピクセルを持つ画像が必要になります。
たとえば、100px×100pxの標準解像度（@ 1x）の画像があるとします。この画像の@ 2xバージョンは200px×200pxになり、@ 3xバージョンは300px×300pxになります。
【引用元：Apple Developer ヒューマンインターフェイスガイドライン】https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/image-size-and-resolution/
ここも以前の復習ですが、
AppleのOSの解像度は、72dpiでした。
ゆえに、1px = 1pt です。
Retinaディスプレイ以外の通常のディスプレイの場合、デバイスピクセル比は1：1です。
Retinaディスプレイの場合、デバイスピクセル比は1：2 または、1：3 です。
Retinaディスプレイの場合、
私たちがCSSファイルに書くCSSピクセルさんの1pxは、
デバイスピクセルの1pxにならないようです。
なので、
デバイスピクセル比に合わせてCSSピクセルさんを調整しなければなりません。
そこで、デバイスピクセル比に合わせたCSSピクセルさんが敷き詰められた画像が必要になるとのことです。
画像を張る場所を、画像領域とします。
たとえば、100px×100pxの画像領域に画像を張ります。
その時、画面解像度が200px×200pxの画像を用意してあげればよいことになります。
（皆さんがいつもやっている、widthを100pxで設定するあれです）
このシリーズは長かったです。
さすがにここまで来ると、ほぼ復習でお話が終わりますw
エクセルで全体像をわかりやすくまとめてあるので、なにかいい方法でupできればいいなと思っています。
これからさらに経験や知見を深めていくと、今までの認識が間違っていた・・・なんてことはざらにあると思いますので、その時はちゃんとリライトしていきますw
引用させていただいた信用力の高いソース様に感謝します。
これからもよろしくおねがいいたします。