使用密度描述元

Katie Hempenius
Katie Hempenius
X

探索此示範

  • 如要預覽網站，請按下「查看應用程式」。然後按下 全螢幕 全螢幕。
  • 使用不同的裝置重新載入頁面，看看瀏覽器的載入情況 所以映像檔較小

您可以使用裝置模擬器執行這項操作。正在尋找特定螢幕 請嘗試下列裝置：

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 年代開始，這是預設解析度 系統。此外，它也是 CRT 的解析度。 監控器

隨著 LED 顯示器在 2000 年代風行，這個產業也開始改變。我們要用 Apple 在 2010 年導入 Retina 顯示器時，驚豔了亮眼成績。這些 螢幕的最低解析度為 192 ppi，是解析度的兩倍 「一般」螢幕 (192 ppi/96 ppi = 2)。

window.devicePixelRatio

隨著新型顯示技術問世，「裝置像素」開始變化 實體大小和形狀 和「CSS 像素」的尺寸已不同。需要定義 「裝置像素」大小之間的關係和「CSS 像素」有哪些來源 devicePixelRatio 導入 (有時稱為「CSS Pixel」) 比率」)。

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 提供不同映像檔版本。

裝置像素比率 表示： 這部裝置上的 <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 屬性 搭配寬度描述元使用。