使用密度描述元

Katie Hempenius

探索此示範

• 如要預覽網站，請按下「View App」。然後按下「Fullscreen」圖示 。
• 使用不同的裝置重新載入網頁，看看瀏覽器會載入哪些圖片。

您可以使用裝置模擬器來執行這項操作。如要尋找特定顯示密度，請嘗試下列裝置：

• 請查看 index.html 中的程式碼，瞭解如何實現這項功能。

運作方式

大多數使用者可能不熟悉密度描述元的概念。為了進一步瞭解這些元素，建議您先瞭解瀏覽器如何與像素互動。

什麼是像素

首先我們來先定義像素

裝置像素 (又稱「實體像素」)

裝置上可顯示的最小色彩點。

邏輯像素

指定格線中特定位置的顏色資訊。這種像素沒有固有的實體尺寸。

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 像素」相同。由於需要定義「裝置像素」和「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 提供不同的圖片版本。

注意事項：

• 圖片編輯器、檔案目錄和其他位置列出的像素尺寸，是邏輯像素的測量值。
• 如果是解析度較高的螢幕和較大的螢幕，需使用尺寸較大的圖片。如果只是放大較小的圖片，就會失去提供多個圖片版本的目的。如果未提供高解析度圖片，瀏覽器也會執行這項操作。

使用密度描述符放送多個
圖片

密度描述符可與「srcset」屬性搭配使用，為不同的 devicePixelRatio 提供不同的圖片。

• 請查看 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 屬性僅用於寬度描述元。