WordPress がバージョンアップして、管理画面！が Retina ディスプレーに対応したそうです。管理画面が、です。

iPhone 4 が出て以来、アプリの開発者もWeb制作者も、またひとつ手間が増えています。その最大の要因が、Retina ディスプレー。

Retina ディスプレー関連のカオスを相当大ざっぱにまとめると、、、

Retina ディスプレーは iPhone 4 で 960 × 640 ドットの画面解像度となっています（一昔前のノートブックPC並の解像度をあの小さなサイズに詰め込んでいます）。

iPhone 3GS は普通に 320 × 480 ドットだったので、このままではアプリケーションレベルで互換性に問題が出ます。そこで、アプリケーションが認識する画面解像度はあくまで 320 × 480 ドットのままにし、本当の解像度との比率として「device Pixel Ratio」という値を新設したのです。

その結果、APIに渡す従来からの出力解像度としてのdpiとは別の単位が必要になり、新たに出力解像度としてのppiを新設してしまったのではないかとにらんでいます。

Retina の場合は、今のところ全て「device Pixel Ratio ＝２」なので、まだシンプル。これに倣った android は 1.25、1.5、2 等が混在してカオス状態。

Windows 8 ではユーザーがコンパネで設定する放任状態。

アプリの開発者泣かせの device Pixel Ratio ですが、何が困るって、画像を device Pixel Ratio に合わせて複数用意しないといけなくなってしまった事。

元々デジタルなディスプレーは device Pixel Ratio は伝統的に１が基本。というかその状態が最も画質が良いとされて来たのです。それが Retina でひとつの画素（デジタルのPixel）を４つのドットで表示するようになりました。現在のデジタル画像のフォーマットとは合わない出力方式です。オフセット印刷と同じような問題がディスプレーでも発生してしまった訳です。

Retina （倍密度表示）の恩恵を最も受けるのは、文字等のベクトルデータの表示で、画像ではないです。

文字では分かりにくいと思うので、device Pixel Ratio を実感できるようなサンプルを作成しました。

上の図表を、PCやスマホでクリック/タップして見てください。具体的にどういう計算をして、どういう結果になるのかを実感しやすくなるサンプルプログラムを書いてみました。

画面の中に、640pix幅のものを50%縮小表示している画像と、320pix幅のものを100%表示している画像を並べてあります。device Pixel Ratio ＝１のPCで見る場合より、device Pixel Ratio ＝２ の iPhone で見る方が、両画像の品質差が大きく見えると思います。これは、ブラウザにとっては 320pix の画素数でも、実際には 640pix に拡大表示（本当の画面の出力：１pixel ＝１ドットで表示）しているからです。

ユーザーにはあまり関係ない話ですが、コンテンツを提供する側は、ちょっと面倒な事になっているのです。。。

ググると色々出てきますが、とても良く整理されていて良いなぁと思ったサイトをひとつ紹介します。いまさら聞けないRetina対応のための「ピクセル」の話。

この問題の解決策は、色々話し合われているようですが、完全解決にはもう少しかかりそうです。

なお、device Pixel Ratio はブラウザ（アプリ）側で JavaScript で取得します（サーバ側の処理では取得できません）。これを php に post して処理しています。

あと、ブラウザによって挙動が違うのも困りもんです。Opera と IE はダメっぽいです。