ピクセルは、常にデジタルデザインの最小単位です。 これは、デザイナーにとっては目に見えない尺度です。 「ピクセルピクセルピクセル」というフレーズは、印刷デザイナーが固定画面密度の概念を理解できるようにするために採用されました。 Webデザイナーは、ドットの代わりにピクセルを採用しました。
技術が急速に改善され、ppiが絶えず成長している現在、常に安定している特定の相対値を見つけることが必要になりました。 この値はかつてピクセルでした。 ブラウザーでのページのスケーラビリティは、 QuirksModeで読むとまったく異なるものです 。 高解像度画面のピクセルとは何ですか？ iPhone 4の解像度が640px×960pxの画像がブラウザで320px×480pxとして表示されるのはなぜですか？ 真実には、ピクセルには2つの概念があります。それらは、画面上の最小の物理単位（ハードウェアピクセル）である場合と、 光学単位（参照ピクセル）である場合があります。
ハードウェアピクセル
私たちのほとんどは、ハードウェアピクセルに精通しています。 これは、赤、緑、青のサブピクセルを含む画面上の最小の物理的なポイントです。 これらのサブピクセルの光は混合され、ピクセルで構成された画像が表示されます。 ハードウェアピクセルは画面の物理的な要素であるため、ストレッチも分割もできません。 これらのプロパティにより、ピクセルは少しアトムになります。すべてが構築される設計単位です。
参照ピクセルと分離原子
今、すべてが少し変わっています。 W3Cは現在、基準ピクセルを標準測定単位として採用することを検討しています 。 ハードウェアピクセルに基づくすべての測定システムは、ハードウェアの約2倍の参照に基づいています。 このようなピクセルは、どの画面でも同じサイズで、どの密度でもあります。 その美しさは、画面への近さを考慮に入れていることです。 電話を顔に近づけると、参照ピクセルは遠くから見た投影よりも小さくなります。 携帯電話を投影と同じレベルに配置する場合、デバイスのディスプレイのppiまたは解像度に関係なく、ピクセルサイズは同じである必要があります。 適切な実装により、新しい標準は、画面上の表示距離とピクセル密度に関係なく、すべてのデバイスとプラットフォームで前例のない安定性を提供します。
参照ピクセルは素晴らしいですが、今では2つの矛盾する定義があります。 Androidデバイスには 、密度に依存しないピクセル（ディップ）と呼ばれる独自の値があります。 この値は、画面上の要素が占める光学ピクセルの数を決定するために開発者によって使用されます。 これにより、ハードウェアピクセルを使用して、 pxとテキストのサイズを設定するための相対値を使用して、正しく表示されるグラフィックを作成できます。 これらの普遍的な値は、ディスプレイのパラメーターに関係なく、すべてのデバイスで機能します。 Androidは「ピクセル」の定義を他の2つに分割することで合理的に行動しましたが、ウェブはハードウェアピクセルに基づいて長年にわたって作成されたコンテンツを処理します。 Webデザイナーにとっても同様の価値があるとよいでしょう。 しかし、定義としてのピクセルの完全な改訂がなければ、それに基づいたウェブは崩壊する可能性があります。 モバイルデバイスは通常、Webサイトの幅を画面の幅に圧縮するため、テキストは完全に判読できなくなります。 ズームブロックサイトはすぐに役に立たなくなります。
Galaxy TabおよびKindle Fireの標準ピクセルサイズ。
また、各デバイスがピクセルと見なすものもわかりません。これは問題です。 たとえば、Galaxy TabとKindle Fireの画面サイズと解像度は同じです。 しかし、参照ピクセルによって調整されたタブのピクセルは、Kindle Fireのハードウェアの1.5倍です。 現時点では、画面上の測定単位の標準化された仕様はハードウェアピクセルのみであるため、テストを実施するために手元に持っていない特定のデバイス用に何かを開発することは不可能です。 これら2つのデバイスを見て、それらの表示設定が同一であり、どちらもレンダリングにWebkitを使用していることを知っている場合、Web開発者は自分のWebサイトが両方で同じように見えると思います。 残念ながら、そうではありません。
ブレークポイントの定義と前進
現在、ピクセルが最適な位置にないことを自信を持って言うことができます。 ただし、メディアクエリを使用して不整合を特定し、修正することができます。 メディアクエリのdevice-pixel-ratioを使用すると、「非標準」ピクセルのデバイスを特定できます。 このプロパティを特定のアクセス許可と組み合わせて、より正確な定義を行うこともできます。 iPhone 4のデバイスピクセル比は2です。つまり、ピクセルはハードウェアピクセルの2倍です。 ほとんどのAndroidデバイスには、ハードウェアの1.5倍のサイズのピクセルがあります。 「想像上の」ピクセルがハードウェアピクセルよりも多いので、画面上のイメージは何倍になります。 特異性は、デバイスのクラスを決定する重要な要素です。 ただし、それぞれにデバイス定義パラメーターを指定するように具体的にしないでください。 ほとんどのデバイスには同様の問題があります。 メディアクエリを使用すると、「仮想」ピクセルのサイズ、画面の幅と高さなどによってデバイスを識別できます。 また、デバイスの現在の向き（縦または横）を確認することもできます。
@media screen and (device-pixel-ratio: 1.5)
and (device-width: 683px)
and (orientation: landscape),
screen and (device-pixel-ratio: 1.5)
and (device-width: 400px)
and (orientation: portrait)
メディアクエリのdevice-pixel-ratioでは、ベンダープレフィックスを使用する必要があることに注意してください。
さて、Kindle Fireを見てみましょう。その画面解像度はGalaxy Tabと同じですが、2番目とは異なり、ハードウェアピクセルを使用します。 このようなデバイスを扱うとタスクが少し複雑になり、ネットブックとタブレットが指定されたパラメーターに該当する可能性が高くなります。 メディアクエリの方向とmax-device-heightを使用して、必要なデバイスを決定します。 通常、返される画面の高さは実際の高さよりもわずかに低くなります。1024x 768の解像度でタブレットを除外するには、高さを600pxに設定します。 次のようになります。
@media screen and (device-pixel-ratio: 1)
and (device-width: 1024px)
and (max-device-height: 600px)
and (orientation: landscape),
screen and (device-pixel-ratio: 1)
and (device-width: 600px)
and (max-device-height: 1024px)
and (orientation: portrait)
Galaxy TabおよびKindle Fireの正規化されたピクセル。
Webサイトのサイズ変更をより細かく制御するには、 emを尺度として使用できます。これはテキストだけでなく、 pxで測定されるすべてに適用されます。 次に、フォントサイズを設定する必要があります。 Kindle Fireのメディアクエリで、サイズを現在のサイズの1.5倍に設定します。 Galaxy Tabを強制的にハードウェアピクセルで表示する場合は、テキストサイズを2/3倍して、Tabのメディアクエリに結果を書き込みます。 コードの例はここにあります 。
ご覧のとおり、ピクセルのいくつかの「タイプ」を調整するのはそれほど簡単ではありません。 ピクセルは最も基本的な単位であり、光学ピクセルに切り替えると、多くの奇妙な変化が生じます。 モバイル機器メーカーは、これらの問題を特定して解決するための良い仕事をしていますが、何かが常にうまくいかないでしょう。 幸いなことに、漏洩した問題を解決するために使用できるツールがあります。