**この記事は古い情報です。最新情報はインターネットで確認してください。** 以下は、Retinaディスプレイ、物理ピクセル、マルチデバイス適配に関する知識のまとめです（個人の見解に基づいていますので、不備な点があればご容赦ください）。不定期で更新を行う予定です。各項目の参考文献URLは記載していますので、不明点があれば元記事をご覧ください。

1. デバイスピクセルレシオ

デバイスピクセルレシオ（devicePixelRatio）は、物理ピクセルと論理ピクセル（device-independent pixels）の比率です。

基本的な計算式は次のように表されます。

デバイスピクセルレシオ = 物理ピクセル数 / 論理ピクセル数（ある方向xまたはy）

物理ピクセルは通常の画面解像度を指します。例えば、iPhone 6の物理ピクセルは750x1334です。

論理ピクセルは画面の実際のビュー領域を指します。iPhone 6のビュー領域は375x667です。

iPhone 6のデバイスピクセルレシオは750/375 = 2です。

デバイスピクセルレシオが1の場合、それは通常のディスプレイです。

デバイスピクセルレシオが1より大きい場合（一般的には1.5、2.0）、それはRetinaディスプレイです。

2. 適配方法

以下は、マルチディスプレイ適配のための方法です。

1. メディアクエリを使用した方法（背景画像にのみ使用可能）

メディアクエリを使用して、-webkit-device-pixel-ratio、-webkit-min-device-pixel-ratio、-webkit-max-device-pixel-ratioなどのプロパティを指定します。

例:

1 .css {/* 普通ディスプレイ用画像 */ 
2     background-image: url(img_1x.png);
3 }
4 @media only screen and (-webkit-min-device-pixel-ratio:1.5){
5 .css {/* 高精細ディスプレイ用画像 */ 
6     background-image: url(img_2x.png);
7 }

2. JavaScriptを使用した方法

window.devicePixelRatioを使用して、レティナディスプレイかどうかを判定し、画像ソースを変更します。

1 $(document).ready(function(){
2     if (window.devicePixelRatio > 1) {
3         var $lowresImages = $('img');
4         $lowresImages.each(function(index, element) {
5             var src = $(element).attr('src');
6             var highresSrc = src.replace('.', '@2x.');
7             $(element).attr('src', highresSrc);
8         });
9     }
10 });

3. SVGを使用した方法

SVG画像はベクター形式のため、拡大しても品質劣化がありません。

3. マルチディスプレイレイアウトの考慮

以下の点に注意します。

• レイアウト全体ではパーセントを使用します。
• Rem単位を使用する場合、画像の固定アスペクト比が必要です。
• フォントサイズはpx単位を使用することが一般的です。
• 1pxの境界線はrem単位ではなくpx単位を使用します。

Rem単位の計算方法:

Rem単位は、ルート要素（html）のfont-sizeを基準として計算されます。

ブラウザのデフォルトfont-sizeは16pxです。

Rem単位を10pxに変換する場合、html要素のfont-sizeを62.5%に設定します。

具体的な値の例:

12px → 1.2rem

10px → 1rem

Rem単位の設定方法:

iPhone 6のデザインを基準とした場合、画面幅375pxを使用します。

画面幅が640px以上の場合、640pxを上限とします。

画面幅が320px以下の場合、320pxを下限とします。

1 <script>
2     var currentScreenWidth, fontSizeMultiplier, designScreenWidth;
3     // iPhone 6のデザインを基準とした場合
4     designScreenWidth = 375;
5     adjustFontSize();
6 
7     // リサイズイベントをリスン
8     window.addEventListener('resize', adjustFontSize, false);
9 
10     function adjustFontSize() {
11         currentScreenWidth = document.documentElement.clientWidth;
12         // 画面幅の最大と最小値を設定
13         if (currentScreenWidth > 640) currentScreenWidth = 640;
14         if (currentScreenWidth < 320) currentScreenWidth = 320;
15         // Rem値を計算
16         fontSizeMultiplier = ((62.5 * currentScreenWidth) / designScreenWidth).toFixed(2);
17         document.documentElement.style.fontSize = fontSizeMultiplier + '%';
18     }
19 </script>