裝置螢幕尺寸與解析度

邏輯解析度、實體解析度與 DPR 的差異

每一款現代螢幕都有兩種解析度。實體解析度是面板實際內建的像素數量——例如 iPhone 15 為 1179 × 2556。邏輯（CSS）解析度則是網頁版面配置所使用的較小座標空間，例如 393 × 852。裝置像素比（DPR）是連結兩者的橋樑：它等於實體解析度除以邏輯解析度，因此 DPR 為 3 表示手機會用 3 × 3 個實體像素來繪製每一個 CSS 像素。高密度的「Retina」手機與筆電採用 2 或 3 的 DPR，以呈現銳利的文字與影像；一般桌上型螢幕的 DPR 則為 1，此時一個 CSS 像素等於一個實體像素。

為什麼設計師以視窗尺寸為準

建立響應式版面配置時，CSS 媒體查詢與中斷點都是以 CSS 像素（也就是邏輯視窗）為單位，而非面板的實體像素。一支實體寬度達 1080 像素的手機，回報的視窗寬度可能只有 360～414 CSS 像素，這也是為什麼 360px 的行動裝置中斷點能涵蓋大多數 Android 手機。依視窗尺寸而非原始解析度來設計，能讓文字與觸控目標在像素密度差異極大的裝置上維持一致的實體大小，使同一份版面配置在低密度筆電與高密度旗艦手機上都能呈現恰當的效果。

如何解讀這份表格

• 視窗大小（CSS px）是網頁所看到的邏輯尺寸，依裝置的自然方向列出——手機與平板為直向，筆電與螢幕為橫向。
• 實體解析度是面板真正的像素數量，也就是規格表上標示的數字。
• DPR（裝置像素比）是將視窗尺寸放大至實體解析度的倍數；只要數值大於 1，就代表這是高密度顯示器。
• 長寬比代表螢幕的形狀，從現代手機修長的 19.5:9，到大多數螢幕常見的 16:9，再到超寬螢幕的 21:9 與 32:9。
• 筆電與 4K 螢幕的資料列反映一般預設的顯示器縮放比例，因此視窗尺寸可能會小於面板原生解析度。

尺寸會隨每一代機型改變

請將這些數字視為實用的參考值，而非絕對保證。製造商幾乎每一代都會調整螢幕尺寸——光是 iPhone 近期機型的視窗寬度就出現過 375、390、393、402、414、430 與 440 CSS 像素，Android 裝置的差異更大。作業系統的顯示器縮放設定也會改變回報的視窗尺寸：一台 1080p 的 Windows 筆電在 150% 縮放下，表現得就像是一台 DPR 為 1.5 的 1280 × 720 螢幕。最可靠的數字永遠是你自己瀏覽器所回報的數值，這也是為什麼上方會即時偵測並比對你的螢幕來找出相符的裝置。