2010年の夏に
iPhone 4の販売が開始されてから2年以上が経過し、過去2年間、サイトビルダーは
window.devicePixelRatio （またはCSSで
device-pixel-ratioメディアクエリを使用）をJavaScriptを使用してすぐに確認することに慣れていますサイトが
Retinaディスプレイで実行されて
いるかどうか。
devicePixelRatioの値が
2の場合、
Retinaディスプレイ（4番目のiPhone、4番目のiPod Touch、3番目のiPad、またはそれ以降のデバイス、またはRetina Displayポータブルコンピューターを搭載したMacBook Pro）があります。
devicePixelRatioの値が
1に等しい（または定義されていない）場合、通常の定義の表示になります。
Appleに比べて、Androidを実行しているデバイスを考慮するのは少し複雑です。1つまたは2つではない小数値を認識する必要があります。
Peter-Paul Kochは、ブログ
記事 「
devicePixelRatioの詳細 」で、Nexus Oneでは
devicePixelRatioの値
が 1.5であるのに対し、Galaxy NexusとGalaxy NoteではWebKitで
2、2.25 で 2.25である
と述べています。 Opera Mobile。
しかし、これらの小さな違いは全体として全体像を変えることはありません：誰もが同じ携帯電話（またはタブレット、ラップトップ）で
絶えず一定であるような
デバイスのプロパティとして
devicePixelRatioの値について考えることに
慣れてい
ます 。 特に、すべて、Habrahabrブログエントリのレシピ「
Retinaスクリーンにグラフィックを
適合させる 」、「
javascriptで Retina ディスプレイを
認識する 」、「
Leafletを使用 してRetina ディスプレイを考慮してiPhone 4にOpenStreetMapマップを表示する 」、「
区別方法SafariのiPadバージョン 」、「
Retinaスクリーン用のグラフィックスの最適化 」、「
Retina用の包括的なサイト準備 」など。
しかし、2012年11月がやってきました。この習慣
を捨てる時です。古いレシピを批判的にレビューする時です。 理由を説明します。
Peter-Paul Kochがブログ
投稿 「
More about devicePixelRatio 」を更新し、彼が
直接目撃したことを追記に書いたときに最初の鐘が鳴りました
。OperaMobile のブラウザーでの
devicePixelRatioの価値はズーム
（ズーム）に依存し
ます。Firefoxバージョン18で
devicePixelRatioのサポート
が登場すると 、2番目のベルが鳴りました。この値は、ページの拡大機能としても設定されていました。
W3C参加者が、「
ズーム下でのdevice-pixel-ratioの振る舞い 」というテーマの文字での
wwwスタイルのメーリングリスト内で、
devicePixelRatioの値が物理的な数（画面）ページの
CSSピクセル
あたりのピクセル -それがどのように達成されたか（
Retinaディスプレイを埋め込むか、キーボードの
Ctrl +を押すだけ）は、
誰も気にしないでください。
紳士、読者の皆さん。
devicePixelRatioには特定のデバイスに固有の定数値があることを永遠に忘れることができます。 これは真実ではありません-むしろ、今では
常に真実ではあり
ません 。
このようなニュースには、良い面と悪い面の2つの側面があることは明らかです。
おそらく、すべてのサイトビルダーが、値
devicePixelRatioによって
デバイスを
識別する以前の試みが将来的には常に成功するとは限らないことを喜んでいる
わけではありません。
おそらく、すべてのサイトビルダーが、ドキュメントを操作する最初の段階で（
load または readyイベントにより）JavaScriptで
devicePixelRatioを読むだけで十分であることに満足するわけではありません。読者が変更した場合、変更された場合、変更されたページ倍率に合わせて画像の解像度を調整する必要があります。
一方、
読者は喜ぶでしょう。 以前は、インターネットから特定の画像の高解像度バージョンを取得するには、このバージョンを表示できるRetinaディスプレイを備えた高価なApple機器を購入する必要がありました。 そして、今度はキーボードの
Ctrl- +を数回押すだけで十分です-もちろん、サイト作成者が
devicePixelRatioへの応答を
変更するか、CSSの
デバイスピクセルに基づいてメディアリクエストを送信するのを忘れない限り、サイトからダウンロードされ、画像が2倍になります
-ratio 。
将来、
イメージセットプロパティの2月の提案が受け入れられた場合、サイト構築のこの特定のニュアンスがさらに簡素化されることを期待できます。
selector { background: image-set(url(foo-lowres.png) 1x, url(foo-highres.png) 2x) center; }
WebKit
が3月に導入したことは言うまでもありません。
刺激的です。 未来は輝いて見える。
写真のサイズを2倍にすることで、3倍、4倍などが可能になることに注意してください-読者が増加を抑える準備ができているため、サイトビルダーが同じイラストのさらに大きなバージョンを提供する準備ができているためです。