📱 全球最完整裝置規格資料庫,現已支援繁體中文!英文版同步更新 → yesviz.com
視窗大小、解析度及 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 媒體查詢的直接連結:

贊助
Viewport Size Table for iPhone models
裝置
名稱
視窗
大小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 Max CSS Media Query
Apple iPhone 17 Pro 402 x 874 1206 x 2622 6.3″ 3.0 460 153 Apple iPhone 17 Pro CSS Media Query
Apple iPhone 17 Air 420 x 912 1260 x 2736 6.5″ 3.0 460 153 Apple iPhone 17 Air CSS Media Query
Apple iPhone 17 402 x 874 1206 x 2622 6.3″ 3.0 460 153 Apple iPhone 17 CSS Media Query
Apple iPhone 17e 390 x 844 1170 x 2532 6.1″ 3.0 460 153 Apple iPhone 17e CSS Media Query
Apple iPhone 16 Pro Max 440 x 956 1320 x 2868 6.9″ 3.0 460 153 Apple iPhone 16 Pro Max CSS Media Query
Apple iPhone 16 Plus 430 x 932 1290 x 2796 6.7″ 3.0 460 153 Apple iPhone 16 Plus CSS Media Query
Apple iPhone 16 Pro 402 x 874 1206 x 2622 6.3″ 3.0 460 153 Apple iPhone 16 Pro CSS Media Query
Apple iPhone 16 393 x 852 1179 x 2556 6.1″ 3.0 460 153 Apple iPhone 16 CSS Media Query
Apple iPhone 15 Pro Max 430 x 932 1290 x 2796 6.7″ 3.0 460 153 Apple iPhone 15 Pro Max CSS Media Query
Apple iPhone 15 Plus 430 x 932 1290 x 2796 6.7″ 3.0 460 153 Apple iPhone 15 Plus CSS Media Query
Apple iPhone 15 Pro 393 x 852 1179 x 2556 6.1″ 3.0 461 153 Apple iPhone 15 Pro CSS Media Query
Apple iPhone 15 393 x 852 1179 x 2556 6.1″ 3.0 461 153 Apple iPhone 15 CSS Media Query
Apple iPhone SE (2022) 375 x 667 750 x 1334 4.7″ 2.0 326 163 Apple iPhone 14 SE 2022 CSS Media Query
Apple iPhone 14 Pro Max 430 x 932 1290 x 2796 6.7″ 3.0 460 153 Apple iPhone 14 Pro Max CSS Media Query
Apple iPhone 14 Plus 428 x 926 1284 x 2778 6.7″ 3.0 458 153 Apple iPhone 14 Plus CSS Media Query
Apple iPhone 14 Pro 393 x 852 1179 x 2556 6.1″ 3.0 460 153 Apple iPhone 14 Pro CSS Media Query
Apple iPhone 14 390 x 844 1170 x 2532 6.1″ 3.0 460 153 Apple iPhone 14 CSS Media Query
Apple iPhone 13 mini 360 x 780 1080 x 2340 5.4″ 3.0 476 159 Apple iPhone 13 Mini CSS Media Query
Apple iPhone 13 Pro Max 428 x 926 1284 x 2778 6.7″ 3.0 458 153 Apple iPhone 13 Pro Max CSS Media Query
Apple iPhone 13 Pro 390 x 844 1170 x 2532 6.1″ 3.0 460 153 Apple iPhone 13 Pro CSS Media Query
Apple iPhone 13 390 x 844 1170 x 2532 6.1″ 3.0 460 153 Apple iPhone 13 CSS Media Query
Apple iPhone 12 mini 360 x 780 1080 x 2340 5.4″ 3.0 476 159 Apple iPhone 12 Mini CSS Media Query
Apple iPhone 12 Pro Max 428 x 926 1284 x 2778 6.7″ 3.0 458 153 Apple iPhone 12 Pro Max CSS Media Query
Apple iPhone 12 Pro 390 x 844 1170 x 2532 6.1″ 3.0 460 153 Apple iPhone 12 Pro CSS Media Query
Apple iPhone 12 390 x 844 1170 x 2532 6.1″ 3.0 460 153 Apple iPhone 12 CSS Media Query
Apple iPhone SE (2020) 375 x 667 750 x 1334 4.7″ 2.0 326 163 Apple iPhone SE CSS Media Query
Apple iPhone 11 Pro Max 414 x 896 1242 x 2688 6.5″ 3.0 458 153 Apple iPhone 11 Pro Max CSS Media Query
Apple iPhone 11 Pro 375 x 812 1125 x 2436 5.8″ 3.0 458 153 Apple iPhone 11 Pro CSS Media Query
Apple iPhone 11 414 x 896 828 x 1792 6.1″ 2.0 326 163 Apple iPhone 11 CSS Media Query
Apple iPhone XS Max 414 x 896 1242 x 2688 6.5″ 3.0 458 153 Apple iPhone XS Max CSS Media Query
Apple iPhone XR 414 x 896 828 x 1792 6.1″ 2.0 326 163 Apple iPhone XR CSS Media Query
Apple iPhone X 375 x 812 1125 x 2436 5.8″ 3.0 458 153 Apple iPhone X CSS Media Query
Apple iPhone 8 375 x 667 750 x 1334 4.7″ 2.0 326 163 Apple iPhone 8 CSS Media Query
Apple iPhone 8 Plus 414 x 736 1080 x 1920 5.5″ 3.0 401 134 Apple iPhone 8 Plus CSS Media Query
Apple iPhone 7 375 x 667 750 x 1334 4.7″ 2.0 326 163 Apple iPhone 7 CSS Media Query
Apple iPhone 7 Plus 414 x 736 1080 x 1920 5.5″ 3.0 401 134 Apple iPhone 7 Plus CSS Media Query
Apple iPhone 6s Plus 414 x 736 1080 x 1920 5.5″ 3.0 401 134 Apple iPhone 6s Plus CSS Media Query
Apple iPhone SE 320 x 568 640 x 1136 4.0″ 2.0 326 163 Apple iPhone SE CSS Media Query
Apple iPhone 6s 375 x 667 750 x 1334 4.7″ 2.0 326 163 Apple iPhone 6s CSS Media Query
Apple iPhone 6 375 x 667 750 x 1334 4.7″ 2.0 326 163 Apple iPhone 6 CSS Media Query
Apple iPhone 5s 320 x 568 640 x 1136 4.0″ 2.0 326 163 Apple iPhone 5s CSS Media Query
Apple iPhone 5c 320 x 568 640 x 1136 4.0″ 2.0 326 163 Apple iPhone 5c CSS Media Query
Apple iPhone 5 320 x 568 640 x 1136 4.0″ 2.0 326 163 Apple iPhone 5 CSS Media Query
Cookie 通知

本網站使用 Cookie。我們及合作夥伴透過 Cookie 分析流量並向您展示個人化內容與廣告。點擊「同意」或繼續使用本網站,即表示您同意我們使用 Cookie。