探索這項示範
- 如要預覽網站，請按下「View App」，然後按下「Fullscreen」
。 - 使用不同裝置重新載入頁面，查看瀏覽器載入不同圖片。
這時可以使用裝置模擬器。如要尋找特定螢幕密度，可以試試以下裝置：
| 1 倍密度 | Blackberry Playbook、多種外接螢幕 |
| 2 倍密度 | iPad 或 iPhone 5/6 |
| 3 倍密度 | Galaxy S5 或 iPhone X |
- 請查看
index.html，瞭解如何編寫程式碼來實現這項功能。
運作方式
大多數人可能不熟悉密度描述元的概念。為了更清楚瞭解這些單位，建議您先瞭解瀏覽器如何處理像素。
什麼是像素
首先，我們來定義什麼是像素。這聽起來很簡單，但「像素」實際上可能有多種含義：
- 裝置像素 (又稱「實體像素」)
- 裝置上可顯示的最小顏色點。
- 邏輯像素
- 指定格線特定位置顏色的資訊。 這類像素沒有固定的實體大小。
- CSS 像素
- CSS 規格將像素定義為實體測量單位。1 像素 = 1/96 英寸。
像素密度
像素密度 (也稱為「螢幕密度」或「顯示密度」) 是指特定實體區域中的裝置像素密度。通常以每英寸像素 (ppi) 為單位。
多年來，96 ppi 是非常常見的螢幕密度 (因此 CSS 將像素定義為 1/96 英寸)。自 1980 年代起，這就是 Windows 的預設解析度。此外，這也是 CRT 螢幕的解析度。
2000 年代，LED 螢幕逐漸普及，情況開始改變。特別是 Apple 在 2010 年推出 Retina 顯示器時，引起了極大迴響。這些螢幕的最低解析度為 192 ppi，是「一般」螢幕解析度的兩倍 (192 ppi/96 ppi = 2)。
window.devicePixelRatio
隨著新顯示技術的推出，「裝置像素」的實體大小和形狀開始有所不同，不再與「CSS 像素」相同。為了定義「裝置像素」和「CSS 像素」大小之間的關係，我們推出了 devicePixelRatio (有時稱為「CSS 像素比例」)。
devicePixelRatio 定義特定裝置的裝置像素和 CSS 像素之間的關係。192 ppi 裝置的 devicePixelRatio 為 2 (192 ppi/96 ppi = 2)，因為「2 個顯示像素的大小等於 1 個 CSS 像素」。
目前大多數裝置的裝置像素比例介於 1.0 到 4.0 之間。
在控制台中輸入
window.devicePixelRatio，判斷裝置的像素密度。請參閱這份表格，瞭解常見裝置的像素比例。多數介於 1.0 至 4.0 之間。
那麼，該如何實際運用這項資訊呢？
根據裝置像素比例調整圖片大小
為了讓圖片在高解析度螢幕上呈現最佳效果，必須為不同的 devicePixelRatios 提供不同的圖片版本。
| 裝置像素比例 | 表示： | 在這部裝置上，如果來源圖片為下列大小，CSS 寬度為 250 像素的 <img> 標記看起來會最合適： |
|---|---|---|
| 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都是密度描述元，可告知瀏覽器圖片的預期像素密度。這樣一來，瀏覽器就不需要下載圖片來判斷這項資訊。- 瀏覽器可以選擇三張圖片：
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屬性只能與寬度描述元搭配使用。