css - デバイスのピクセル比とは何ですか？

Question

私の知る限り、これは「抽象的な」解像度とデバイスの物理的な解像度の比率です。だから私はそれを（HTC Desireで）テストします、物理的な解像度はです480x800、それはログアウトされています比率は1.5です。私はいくつかの要素を投入しましたが、それでも480px私の素朴な人が「320px」が必要だと思ったビューポートを埋めるのに正確な幅が必要ですか？

Answer 1

http://www.quirksmode.org/blog/archives/2012/07/more_about_devi.htmlから、作成者はモバイルデバイス間のdevicePixelRatioの違いについて説明しています。

iOS Retinaデバイスでは、screen.widthはディップ単位の幅を示します。したがって、網膜と非網膜iPadの両方がポートレートモードで768を報告します。3つのAndroidデバイスでは、screen.widthは物理ピクセル単位の幅を示します。それぞれ480、720、800。デバイス上のすべてのブラウザは同じ値を使用します。（同じデバイス上の一部のブラウザーがディップを使用し、他のブラウザーが物理ピクセルを使用した場合を想像してみてください！）

これにより、著者は次の結論に至ります。

• iOSデバイスでは、devicePixelRatioにscreen.widthを掛けて、物理的なピクセル数を取得します。
• AndroidおよびWindowsPhoneデバイスでは、screen.widthをdevicePixelRatioで割って、ディップカウントを取得します。

あなたの場合に重要なのは、画面の幅、プレーンでシンプルです。DIPの計算は、開発者としてのあなたではなく、デバイスが処理するものです。デバイスが異なるピクセル比を補正したい場合は、DIPで幅を提供し、比を提供します。ページをネイティブの変更されていないピクセル解像度で表示する必要があると思われる場合は、代わりにその幅を提供します。投稿の著者はまた、私が興味深いと思う次の結論に達しました：

Appleは、ディスプレイをより鮮明で滑らかにするためにピクセルを追加しましたが、Androidベンダーは、画面にさらに多くのものを詰め込むためにピクセルを追加しました。

とにかく、ブラウザが提供する幅を使用し、それをデバイスに任せて補正します。