視窗與解析度的差異

什麼是像素？

像素是任何數位顯示器最小的可定址單位——一個攜帶色彩資訊的單一光點。螢幕上的每張圖片、每行文字及每個 UI 元素，都是由數千或數百萬個排列在精確格線中的微小彩色方塊所組成。

就其本身而言，像素沒有固定的實體尺寸。75 吋電視上的一個像素，遠大於 6 吋智慧型手機螢幕上的一個像素。決定顯示清晰度的，不只是像素數量，而是這些像素的封裝密度——這直接關係到螢幕解析度與像素密度。

螢幕解析度——像素總數

螢幕解析度是顯示器上的像素總數，以寬 × 高表示。螢幕解析度 1080 × 2400 代表面板包含 1,080 個水平像素與 2,400 個垂直像素——共超過 250 萬個實體像素。

解析度越高，細節越豐富、文字越清晰，但這只有在與實體螢幕尺寸相比時才有意義。65 吋電視上的 1080p 解析度，明顯比同一解析度在 5 吋智慧型手機上顯得模糊，因為相同的像素數被分散在更大的實體面積上。這就是為什麼螢幕尺寸與解析度必須一起考量。

像素與實體面積的比率，就是像素密度的定義。

每英吋像素數（PPI）——螢幕清晰度說明

每英吋像素數（PPI）衡量螢幕每英吋能容納的像素數量，以對角線像素數除以對角線螢幕尺寸（英吋）計算。PPI 是最直接衡量顯示清晰度的指標。

標準桌機螢幕通常在 90–110 PPI 左右。大多數現代智慧型手機超過 400 PPI，旗艦裝置可達 460–500 PPI。Apple 的 Retina 顯示技術專門設計來達到一個 PPI 門檻，使個別像素在一般觀看距離下無法被人眼察覺。

對網頁開發者而言，PPI 有實際的影響：font-size: 16px 這樣的 CSS 屬性，在 96 PPI 的桌機螢幕與 460 PPI 的行動裝置螢幕上表現截然不同。若沒有縮放機制，所有網頁內容在高密度顯示器上都會以極小的尺寸呈現。這個縮放機制就是裝置像素比。

什麼是視窗？

視窗是瀏覽器視窗內網頁的可見區域——您的 HTML 排版與 CSS 樣式實際渲染的區域。當您撰寫 @media (max-width: 768px) 這樣的 CSS 媒體查詢時，您針對的是視窗寬度，而非實體螢幕解析度。

在桌機上，視窗大小隨使用者調整瀏覽器視窗而改變。在行動裝置上，視窗通常等於完整的螢幕寬度。這個像素值決定了您的響應式斷點與排版計算。

關於視窗大小最重要的一點：它以 CSS 像素而非實體像素為單位。這是兩種不同的單位，正是這個差異讓單一響應式 CSS 排版得以在數百種解析度各異的裝置上正常運作。

CSS 像素比——實體像素與邏輯像素的橋樑

裝置像素比（DPR）——也稱為 CSS 像素比——是將實體螢幕像素對應至邏輯 CSS 像素的倍數，回答的問題是：在這部裝置上，幾個實體像素等於一個 CSS 像素？

在標準 1× 顯示器（如大多數桌機螢幕）上，一個 CSS 像素對應一個實體像素，DPR 為 1.0。在現代智慧型手機上，DPR 值為 2.0、2.625、3.0 及 3.5 相當常見。DPR 3.0 代表裝置使用 9 個實體像素（3×3）來渲染一個 CSS 像素，產生更清晰的效果，同時不改變邏輯排版尺寸。

關係式為：視窗大小 = 螢幕解析度 ÷ 裝置像素比。

例如，一支解析度為 1080 × 2400、DPR 為 2.625 的手機，其視窗約為 412 × 915 個 CSS 像素。您的樣式表看到的是 412px 的畫布——而非 1080px——這使排版在高解析度顯示器上不會縮小到無法使用的尺寸。

螢幕解析度、視窗大小與 DPR 如何協同運作

以下是這四個顯示概念之間關係的清晰說明：

• 螢幕解析度是硬體規格——顯示面板的原始實體像素數。
• PPI（每英吋像素數）衡量每英吋螢幕上實體像素的封裝密度。
• 裝置像素比（DPR）是作業系統層級的縮放係數，將實體像素轉換為 CSS 像素。
• 視窗大小是套用 DPR 縮放後，CSS 與 JavaScript 互動的邏輯像素格。

瀏覽器在行動裝置上渲染頁面時，不會以原生螢幕解析度運作，而是在視窗尺寸內工作。作業系統再將每個 CSS 像素對應至適當數量的實體像素，在所有螢幕密度上產生清晰、尺寸正確的結果。

實際案例：Google Pixel 6 與 Google Pixel 6 Pro 的視窗寬度同為 412 個 CSS 像素，因此對 CSS 而言兩者看起來相同。然而 Pixel 6 Pro 的解析度為 1440 × 3120、DPR 為 3.5，而標準 Pixel 6 的解析度為 1080 × 2400、DPR 為 2.625。相同的視窗——截然不同的硬體。

為什麼視窗大小與解析度對網頁開發者很重要

在 CSS 與響應式網頁設計中，您撰寫媒體查詢時永遠針對的是 CSS 像素的視窗大小——而非實體螢幕解析度。max-width: 480px 的斷點，會在任何視窗寬度為 480 個 CSS 像素或更窄的裝置上啟用，無論該裝置的實體解析度是 1080px 還是 1440px。

然而對於圖片，實體解析度有顯著的影響。在 1× 顯示器上以 200 個 CSS 像素渲染的圖片看起來清晰，但在 3× 高密度螢幕上會顯得模糊，因為瀏覽器必須將 200px 的圖片放大至 600 個實體像素。這就是響應式圖片技術——srcset 屬性、CSS 中的 image-set()，以及可縮放的 SVG——成為 Retina 品質網頁設計標準做法的原因。

使用 min-resolution 或 -webkit-min-device-pixel-ratio 媒體特性，向 Retina 螢幕提供高解析度資源：

@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (min-resolution: 192dpi),
       only screen and (min-resolution: 2dppx) {
  /* 高解析度 / Retina 顯示器樣式 */
}

真實裝置的視窗大小與解析度

以下熱門裝置展示了視窗大小、螢幕解析度、DPR 與像素密度在實際情境中的關係：

• Samsung Galaxy S25（2025）
  解析度：1080 × 2340  |  DPR：3.0  |  視窗：360 × 780  |  PPI：~416
• Google Pixel 9 Pro（2024）
  解析度：1280 × 2856  |  DPR：3.0  |  視窗：427 × 952  |  PPI：~495
• Apple iPhone 16 Pro（2024）
  解析度：1206 × 2622  |  DPR：3.0  |  視窗：402 × 874  |  PPI：~460
• Apple iPad Pro 11" M4（2024）
  解析度：2420 × 1668  |  DPR：2.0  |  視窗：1210 × 834  |  PPI：~264
• MacBook Air 13" M4（2025）
  解析度：2560 × 1664  |  DPR：2.0  |  視窗：1280 × 832  |  PPI：~224

iPad 與 MacBook 的 DPR 均為 2.0，因此視窗在寬度與高度上恰好是原生解析度的一半。智慧型手機以 DPR 3.0 運行，儘管實體解析度為 1080–1280px，視窗寬度卻只有 360–427 個 CSS 像素——這個差異會讓任何依賴原始像素數的排版完全失效。

摘要：視窗與解析度

螢幕解析度是實體硬體規格。視窗大小是您的樣式表所使用的邏輯 CSS 畫布。裝置像素比是連結兩者的轉換係數。PPI告訴您顯示器的視覺清晰度。這四個值相互關聯，但各自回答不同的問題——了解何時使用哪個，將使您的 CSS 媒體查詢更精確、圖片在各種螢幕上都清晰，以及響應式排版在任何裝置上都可靠。

免責聲明：資訊來源於各相關網站，力求準確。若發現任何錯誤，請來信：[email protected]