「解析度，是數位排版的物理邊界。」在跨螢幕開發的時代，使用者可能透過從 6 吋手機到 32 吋 4K 螢幕的任何設備訪問網頁。理解物理像素 (Physical Pixels)、邏輯像素 (Logical Pixels) 與顯示比例 (Aspect Ratio) 之間的幾何關係，是打造高品質用戶體驗的第一步。本終端旨在提供一個權威的技術參考庫，協助設計師與工程師在開發初期即能精確定義佈局斷點與素材規格。
解析度與顯示技術核心邏輯解析
01
像素密度與 PPI (Pixels Per Inch)
解析度決定了螢幕上有多少個點，而 PPI 決定了這些點有多密集。同樣是 1080p，在 5 吋手機上會比在 24 吋顯示器上看起來更細緻，這直接影響了我們在設計 UI 時對「字級大小」與「間距感」的判斷。
02
Device Pixel Ratio (DPR) 縮放機制
現代設備常採用「高分屏」（如 Retina 螢幕）。這意味著 1 個邏輯 CSS 像素可能由 4 個甚至 9 個物理像素組成。理解 DPR 是防止網頁圖標模糊、確保向量圖形 (SVG) 優勢的核心知識。
03
寬高比與內容構圖原則
解析度數值決定了寬高比（如 21:9 或 4:3）。不同的比例會影響視覺流向：長寬比越極端的螢幕（如超寬螢幕）越強調水平延伸，而直式螢幕則強調垂直流動與內容的優先級分布。
不同終端的標準解析度應用策略
🖥️ 4K 與 QHD 專業生產力
3840×2160 已成為設計師的標配。這類螢幕擁有極大的操作畫布，設計網頁時應考慮「內容寬度限制」，避免文字行長過長導致閱讀疲勞。
📱 行動端的高清與碎片化
手機螢幕比例趨向長型（如 19.5:9）。在規劃 UI 時，必須考慮底部手勢導航區的安全範圍，並針對常見解析度進行適配測試。
📺 1080p 經典標準與向下相容
1920×1080 依然是目前全球佔有率最高的標準。將此解析度作為「基準佈點」通常是追求最高覆蓋率的最安全策略。
主流設備解析度快速參考指南
在專案開發中，了解目標客群的設備分布是精準排版的前提。以下為常見類別的標準解析度：
主流筆電與筆電顯示器
常見規格：1366×768 (傳統)、1920×1080 (FHD)、2560×1440 (QHD) 與 MacBook 的自定義高解析度比例。
平板電腦與觸控設備
常見規格：2048×1536 (iPad Classic 4:3)、2360×1640 (Air) 與多款 Android 平板採用的 16:10 比例。
超寬與電影比例螢幕
常見規格：2560×1080 (21:9)、3440×1440 (Ultrawide QHD) 與專業電競所使用的 32:9 (5120×1440)。
常見行動通訊設備
常見規格：1170×2532 (iPhone)、1080×2400 (Android 主流) 與較小型的 750×1334 (SE 比例)。
常見問題 (FAQ)
「4K」與「Ultra HD」有什麼不同？
在電視市場，UHD 通常指 3840×2160。而在電影工業中，真正的 4K (DCI 4K) 指 4096×2160。對於網頁開發，我們統稱為 4K 並以 3840 作為佈局上限。
為什麼網頁開發要用「邏輯像素」而非「物理像素」？
因為如果用物理像素，高解析度手機上的文字會變得微小到無法閱讀。瀏覽器透過縮放比例 (Scale Factor) 讓我們在 1080p 手機上看到的元件大小與在 720p 手機上接近。
解析度會影響網頁載入效能嗎？
會。 高解析度代表需要更高質量的圖片素材。建議利用 srcset 屬性針對不同解析度載入不同尺寸的圖片，以平衡視覺品質與載入速度。
提示：在左側點擊不同規格，右側將即時換算顯示比例與媒體查詢斷點。