使用密度描述元

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