視窗大小、解析度及 CSS 媒體查詢
iPhone 視窗大小
每款 Apple iPhone 均採用 Retina 顯示器——一種高密度螢幕,其實體像素數量是 CSS 及網頁瀏覽器實際使用值的 2 倍或 3 倍。這個邏輯像素尺寸就是 iPhone 視窗大小,決定了網站在各款 iPhone 上的排版方式。
Apple 的 Retina 技術將大量實體像素壓縮至每英吋,使人眼在正常觀看距離下無法辨識單個像素點。為保持網頁內容的可讀尺寸,iOS 會套用 2.0 或 3.0 的裝置像素比(DPR),將原生螢幕解析度縮放至較小的邏輯 CSS 像素格。例如,螢幕解析度為 1179 × 2556、DPR 為 3.0 的 iPhone,其視窗為 393 × 852 CSS 像素。當您撰寫 max-width: 430px 的媒體查詢時,針對的是該邏輯視窗,而非硬體解析度。每款 iPhone 的視窗寬度(即 device-width)是驅動響應式斷點與 CSS 排版的關鍵數值。
下表列出從 iPhone 5 至最新 iPhone 17 系列的所有 Apple iPhone 型號,包含視窗大小、螢幕解析度、像素密度(PPI)、裝置像素比、CSS PPI,以及各型號 CSS 媒體查詢的直接連結:
贊助
| 裝置 名稱 |
視窗 大小PX |
裝置 解析度PX |
螢幕 尺寸 |
像素 比 |
密度 PPI |
CSS PPI |
媒體 查詢 |
|---|---|---|---|---|---|---|---|
| Apple iPhone 17 Pro Max | 440 x 956 | 1320 x 2868 | 6.9″ | 3.0 | 460 | 153 | |
| Apple iPhone 17 Pro | 402 x 874 | 1206 x 2622 | 6.3″ | 3.0 | 460 | 153 | |
| Apple iPhone 17 Air | 420 x 912 | 1260 x 2736 | 6.5″ | 3.0 | 460 | 153 | |
| Apple iPhone 17 | 402 x 874 | 1206 x 2622 | 6.3″ | 3.0 | 460 | 153 | |
| Apple iPhone 17e | 390 x 844 | 1170 x 2532 | 6.1″ | 3.0 | 460 | 153 | |
| Apple iPhone 16 Pro Max | 440 x 956 | 1320 x 2868 | 6.9″ | 3.0 | 460 | 153 | |
| Apple iPhone 16 Plus | 430 x 932 | 1290 x 2796 | 6.7″ | 3.0 | 460 | 153 | |
| Apple iPhone 16 Pro | 402 x 874 | 1206 x 2622 | 6.3″ | 3.0 | 460 | 153 | |
| Apple iPhone 16 | 393 x 852 | 1179 x 2556 | 6.1″ | 3.0 | 460 | 153 | |
| Apple iPhone 15 Pro Max | 430 x 932 | 1290 x 2796 | 6.7″ | 3.0 | 460 | 153 | |
| Apple iPhone 15 Plus | 430 x 932 | 1290 x 2796 | 6.7″ | 3.0 | 460 | 153 | |
| Apple iPhone 15 Pro | 393 x 852 | 1179 x 2556 | 6.1″ | 3.0 | 461 | 153 | |
| Apple iPhone 15 | 393 x 852 | 1179 x 2556 | 6.1″ | 3.0 | 461 | 153 | |
| Apple iPhone SE (2022) | 375 x 667 | 750 x 1334 | 4.7″ | 2.0 | 326 | 163 | |
| Apple iPhone 14 Pro Max | 430 x 932 | 1290 x 2796 | 6.7″ | 3.0 | 460 | 153 | |
| Apple iPhone 14 Plus | 428 x 926 | 1284 x 2778 | 6.7″ | 3.0 | 458 | 153 | |
| Apple iPhone 14 Pro | 393 x 852 | 1179 x 2556 | 6.1″ | 3.0 | 460 | 153 | |
| Apple iPhone 14 | 390 x 844 | 1170 x 2532 | 6.1″ | 3.0 | 460 | 153 | |
| Apple iPhone 13 mini | 360 x 780 | 1080 x 2340 | 5.4″ | 3.0 | 476 | 159 | |
| Apple iPhone 13 Pro Max | 428 x 926 | 1284 x 2778 | 6.7″ | 3.0 | 458 | 153 | |
| Apple iPhone 13 Pro | 390 x 844 | 1170 x 2532 | 6.1″ | 3.0 | 460 | 153 | |
| Apple iPhone 13 | 390 x 844 | 1170 x 2532 | 6.1″ | 3.0 | 460 | 153 | |
| Apple iPhone 12 mini | 360 x 780 | 1080 x 2340 | 5.4″ | 3.0 | 476 | 159 | |
| Apple iPhone 12 Pro Max | 428 x 926 | 1284 x 2778 | 6.7″ | 3.0 | 458 | 153 | |
| Apple iPhone 12 Pro | 390 x 844 | 1170 x 2532 | 6.1″ | 3.0 | 460 | 153 | |
| Apple iPhone 12 | 390 x 844 | 1170 x 2532 | 6.1″ | 3.0 | 460 | 153 | |
| Apple iPhone SE (2020) | 375 x 667 | 750 x 1334 | 4.7″ | 2.0 | 326 | 163 | |
| Apple iPhone 11 Pro Max | 414 x 896 | 1242 x 2688 | 6.5″ | 3.0 | 458 | 153 | |
| Apple iPhone 11 Pro | 375 x 812 | 1125 x 2436 | 5.8″ | 3.0 | 458 | 153 | |
| Apple iPhone 11 | 414 x 896 | 828 x 1792 | 6.1″ | 2.0 | 326 | 163 | |
| Apple iPhone XS Max | 414 x 896 | 1242 x 2688 | 6.5″ | 3.0 | 458 | 153 | |
| Apple iPhone XR | 414 x 896 | 828 x 1792 | 6.1″ | 2.0 | 326 | 163 | |
| Apple iPhone X | 375 x 812 | 1125 x 2436 | 5.8″ | 3.0 | 458 | 153 | |
| Apple iPhone 8 | 375 x 667 | 750 x 1334 | 4.7″ | 2.0 | 326 | 163 | |
| Apple iPhone 8 Plus | 414 x 736 | 1080 x 1920 | 5.5″ | 3.0 | 401 | 134 | |
| Apple iPhone 7 | 375 x 667 | 750 x 1334 | 4.7″ | 2.0 | 326 | 163 | |
| Apple iPhone 7 Plus | 414 x 736 | 1080 x 1920 | 5.5″ | 3.0 | 401 | 134 | |
| Apple iPhone 6s Plus | 414 x 736 | 1080 x 1920 | 5.5″ | 3.0 | 401 | 134 | |
| Apple iPhone SE | 320 x 568 | 640 x 1136 | 4.0″ | 2.0 | 326 | 163 | |
| Apple iPhone 6s | 375 x 667 | 750 x 1334 | 4.7″ | 2.0 | 326 | 163 | |
| Apple iPhone 6 | 375 x 667 | 750 x 1334 | 4.7″ | 2.0 | 326 | 163 | |
| Apple iPhone 5s | 320 x 568 | 640 x 1136 | 4.0″ | 2.0 | 326 | 163 | |
| Apple iPhone 5c | 320 x 568 | 640 x 1136 | 4.0″ | 2.0 | 326 | 163 | |
| Apple iPhone 5 | 320 x 568 | 640 x 1136 | 4.0″ | 2.0 | 326 | 163 |