密度記述子を使用する

Katie Hempenius
Katie Hempenius
X

デモを見る

  • サイトをプレビューするには、[アプリを表示] を押します。[ 全画面表示 全画面表示。
  • さまざまなデバイスを使用してページを再読み込みし、ブラウザの負荷が異なることを確認します。 作成します。

これにはデバイス エミュレータを使用できます。特定のディスプレイを 次のようなデバイスをお試しください。

密度 1 倍 Blackberry Playbook、多数の外部モニター
密度 2 倍 iPad / iPhone 5/6
密度 3 倍 Galaxy S5、iPhone X
  • これを機能させるコードについては、index.html をチェックアウトしてください。

仕組み

密度記述子の概念は、ほとんどの人にとってなじみがないかもしれません。より良く ブラウザの仕組みをある程度理解しておくと役立ちます 使用できます。

ピクセルとは

最初に、ピクセルとは何かを定義しましょう。この音が聞こえる シンプルだが「ピクセル」実際には多くの意味を持ちます。

デバイス ピクセル（物理ピクセル）
デバイスで表示できる最小の色ドット。
論理ピクセル
グリッド上の特定の位置の色を指定する情報。 このタイプのピクセルには物理的なサイズはありません。
CSS ピクセル
CSS 仕様では、物理的な測定の単位としてピクセルが定義されています。1 ピクセル = 1/96 インチです。

ピクセル密度

ピクセル密度（「画面密度」、「表示密度」とも呼ばれます） 特定の物理領域におけるデバイス ピクセルの密度を測定します。これは、 1 インチあたりのピクセル数（ppi）で測定されるのが一般的です。

長年にわたり、96 ppi は非常に一般的な表示密度でした（そのため、CSS では 1/96 インチと表現）。1980 年代からは、この解像度がデフォルトの解像度でした できます。さらに、これは CRT モニタリングします。

この考え方は、2000 年代に LED モニターが普及するにつれて変わり始めました。特に Apple は 2010 年に Retina ディスプレイを導入したことで大きな注目を集めました。これらの ディスプレイの最小解像度は 192 ppi で、これは 「レギュラー サイズ」ディスプレイ（192 ppi/96 ppi = 2）

window.devicePixelRatio

新しいディスプレイ技術である「デバイス ピクセル」の導入により、変化し始めた 形状 「CSS ピクセル」と同じサイズではなくなりました。目標を定義する必要性は、 「デバイス ピクセル」のサイズと「CSS ピクセル」新たな脅威に devicePixelRatio（「CSS Pixel」と呼ばれることもある）の導入 比率）。

devicePixelRatio は、デバイス ピクセルと CSS ピクセルの関係を定義します。 表示することもできます192 ppi デバイスの devicePixelRatio は 2（192 ppi/96 ppi = 2）となります。

最近では、ほとんどのデバイスのデバイスピクセル比が 1.0 ～ 4.0 になっています。

  • 「window.devicePixelRatio」と入力してデバイスのピクセル密度を特定する 確認できます。

  • ピクセル比については、こちらの表をご覧ください。 接続できます。ほとんどは 1.0 ～ 4.0 です。

では、この情報を実際にどのように適用すればよいのでしょうか。

デバイスのピクセル比に基づいて画像のサイズを設定する

高解像度の画面で画像をきれいに見せるには、 devicePixelRatios ごとに異なるイメージ バージョンを指定するために必要です。

デバイスのピクセル比 意味: このデバイスでは、<img>CSS 幅 250 ピクセルのタグを作成すると、 ソース画像が次の場合に...
1 1 デバイス ピクセル = 1 CSS ピクセル 幅 250 ピクセル
2 2 デバイス ピクセル = 1 CSS ピクセル 幅 500 ピクセル
3 3 デバイス ピクセル = 1 CSS ピクセル 幅 750 ピクセル

注意事項:

  • 画像エディタ、ファイル ディレクトリ、および 他の場所は論理ピクセルの測定値です
  • 高解像度の画面や大きなディスプレイでは、 大きくすることができます小さな画像を拡大するだけでは、 提供する場合などですいずれにしてもブラウザは 高解像度の画像が提供されていません。
で確認できます。

密度記述子を使用して複数の
画像を提供する

密度記述子（「srcset」との組み合わせ）属性を使用して、 異なる devicePixelRatios に対して異なる画像をサービングします。

  • index.html ファイルを調べて、<img> 要素をメモします。
<img src="flower.jpg"
  srcset="flower-1x.jpg 1x,
          flower-2x.jpg 2x,
          flower-3x.jpg 3x">

この例では、単語を以下のように表現します。

  • 1x、2x、3x はすべて密度記述子で、ブラウザに指示を与えます。 画像のピクセル密度。これによりブラウザが 画像をダウンロードする必要はありません。
  • ブラウザでは、次の 3 つの画像から選択できます。flower-1x.jpg（ ピクセル密度が 1.0、flower-2x.jpg（ ピクセル密度が 2.0）、flower-3x.jpg（ ピクセル密度が 3.0 のブラウザ）。
  • flower.jpg は、ブラウザの代替イメージです。 srcset。

使用方法:

  • devicePixelRatio と x 単位を使用して密度記述子を記述します。対象 たとえば、多くの Retina 画面の密度記述子が （window.devicePixelRatio = 2）は 2x と記述されます。
  • 密度記述子が指定されていない場合は、1x とみなされます。
  • 密度記述子をファイル名に含めることは一般的な規則です（ ファイルの管理に役立ちますが、必須ではありません。イメージには、 あります。
  • sizes 属性を含める必要はありません。sizes 属性は、 使用します。