探索本示範
- 如要預覽網站,請按下「查看應用程式」,然後按下「全螢幕」圖示 。
- 使用不同裝置重新載入頁面,讓瀏覽器載入不同的圖片。
您可以使用裝置模擬器執行這項作業。如果您想尋找特定的顯示密度,可以使用以下裝置:
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
屬性只能與寬度描述元搭配使用。