探索本示範
- 如要預覽網站，請按下「查看應用程式」，然後按下「全螢幕」圖示
。 - 使用不同裝置重新載入頁面，讓瀏覽器載入不同的圖片。
您可以使用裝置模擬器執行這項作業。如果您想尋找特定的顯示密度，可以使用以下裝置：
| 1 倍密度 | Blackberry 教戰手冊，許多外接螢幕 |
| 2 倍密度 | iPad 或 iPhone 5/6 |
| 3 倍密度 | Galaxy S5 或 iPhone X |
- 查看
index.html以取得執行此動作的程式碼。
運作方式
大多數人對密度描述元的概念可能並不陌生。如要進一步瞭解瀏覽器與像素搭配運作的方式，建議您概略瞭解瀏覽器使用像素的運作方式。
什麼是像素？
首先，我們先定義像素是什麼。這聽起來很簡單，但「pixel」其實有許多意義：
- 裝置像素 (又稱為「實體像素」)
- 裝置可顯示的最小色彩圓點。
- 邏輯像素
- 用於在網格中指定特定地點顏色的資訊。這類像素並無固有的實體尺寸。
- CSS 像素
- CSS 規格將像素定義為實體測量單位。1 像素 = 1/96 英寸。
像素密度
像素密度 (也稱為「螢幕密度」或「顯示密度」) 會測量指定實體區域中的裝置像素密度。通常使用每英寸像素數 (ppi) 進行測量。
多年來，96 ppi 一直是相當常見的螢幕密度 (因此 CSS 將像素定義為 1/96 英寸)。從 1980 年代開始，這會成為 Windows 的預設解析度。此外，也是 CRT 螢幕的解析度。
隨著 LED 螢幕在 2000 年代開始普及，此情況開始改變了。其中，Apple 在 2010 年導入 Retina 顯示器，便大幅躍升。這些螢幕的最低解析度為 192 ppi，是「一般」螢幕的兩倍 (192 ppi/96 ppi = 2) 的兩倍。
window.devicePixelRatio
隨著新的顯示技術引進，「裝置像素」的實際大小和形狀開始有所不同，且大小不再與「CSS 像素」相同。導入 devicePixelRatio (有時稱為「CSS Pixel 比率」) 時，必須定義「裝置像素」和「CSS 像素」之間的關聯性。
devicePixelRatio 定義特定裝置的裝置像素和 CSS 像素之間的關係。192 ppi 裝置的 devicePixelRatio 為 2 (192 ppi/96 ppi = 2)，因為「其顯示像素大小為 1 個 CSS 像素」。
大多數裝置的裝置像素比例介於 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」屬性搭配使用，可以用來向不同的裝置 PixelRatios 提供不同的圖片。
- 查看
index.html檔案，並記下<img>元素。
<img src="flower.jpg"
srcset="flower-1x.jpg 1x,
flower-2x.jpg 2x,
flower-3x.jpg 3x">
本範例包含以下字詞：
1x、2x和3x都是像素密度描述元，可告知瀏覽器圖片的目標像素密度。這樣瀏覽器就不必下載圖片來判斷這項資訊。- 瀏覽器可以選擇使用三種圖片：
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屬性只能與寬度描述元搭配使用。