iPhone 17 Pro Max 和 18 Pro Max 的 CSS 寬度是 440px，iPhone 12 到 iPhone 14 是 390px。同一個網頁，在兩支手機上就差了 50px，按鈕、表格和圖片都要能跟著伸縮。這份 iPhone 尺寸表把 iPhone 12 到 18 Pro Max 與摺疊 iPhone Duo 的螢幕尺寸整理在一起，再講手機網頁實際要怎麼做。
更新紀錄
- 2026-10-16：新增 iPhone 17 系列、iPhone 18 Pro 系列與 iPhone Duo 尺寸；修正 iPhone 16 Pro Max 寬度為 440px、iPhone 14 為 390px；新增手機網頁製作說明。
PPI、pt、px 差在哪？
PPI 是每英寸的像素數，用來形容螢幕有多細。DPI 原本是印表機每英寸的點數，用在螢幕上其實應該叫 PPI。
pt（點）是 Apple 設計時用的單位，網頁上的 CSS px 對應的就是這個數字。px 是實體像素，iPhone 12 之後的機型都是 @3x，也就是 1 個 CSS px 對應 3 個實體像素。
做網頁時看的是 CSS 寬度。iPhone 16 Pro Max 實體解析度是 1320 x 2868，網頁排版看到的寬度是 440px。舊版文章寫成 460px，那其實是它的 PPI，這次一併改正。
設計師常問：設計稿要用 1320px 還是 440px 畫？
Ring：用 440px（或 390px）畫，切圖再輸出 @2x、@3x。
iPhone 12 到 18 Pro Max 尺寸是多少？
下表像素解析度與 PPI 取自 Apple 機型比較頁（2026-10-16 查閱）與 iPhone 18 Pro 技術規格。CSS 寬高是像素除以 3 推算，Apple 規格頁只公布像素。
| 機型 | 尺寸(吋) | CSS 寬高(pt) | 像素解析度(px) | PPI | 更新率 |
|---|---|---|---|---|---|
| iPhone 12 mini／13 mini | 5.4 | 375 x 812 | 1080 x 2340 | 476 | 60Hz |
| iPhone 12／12 Pro／13／13 Pro／14／16e | 6.1 | 390 x 844 | 1170 x 2532 | 460 | 60Hz（13 Pro 為 120Hz） |
| iPhone 12 Pro Max／13 Pro Max／14 Plus | 6.7 | 428 x 926 | 1284 x 2778 | 458 | 60Hz（13 Pro Max 為 120Hz） |
| iPhone 14 Pro／15／15 Pro／16 | 6.1 | 393 x 852 | 1179 x 2556 | 460 | 60Hz（Pro 為 120Hz） |
| iPhone 14 Pro Max／15 Plus／15 Pro Max／16 Plus | 6.7 | 430 x 932 | 1290 x 2796 | 460 | 60Hz（Pro Max 為 120Hz） |
| iPhone 16 Pro | 6.3 | 402 x 874 | 1206 x 2622 | 460 | 120Hz |
| iPhone 16 Pro Max | 6.9 | 440 x 956 | 1320 x 2868 | 460 | 120Hz |
| iPhone 17e | 6.1 | 390 x 844 | 1170 x 2532 | 460 | 60Hz |
| iPhone 17 | 6.3 | 402 x 874 | 1206 x 2622 | 460 | 最高 120Hz |
| iPhone Air | 6.5 | 420 x 912 | 1260 x 2736 | 460 | 最高 120Hz |
| iPhone 17 Pro／18 Pro | 6.3 | 402 x 874 | 1206 x 2622 | 460 | 最高 120Hz |
| iPhone 17 Pro Max／18 Pro Max | 6.9 | 440 x 956 | 1320 x 2868 | 460 | 最高 120Hz |
| iPhone Duo 外螢幕 | 5.4 | 待確認 | 1398 x 2034 | 460 | 最高 120Hz |
| iPhone Duo 內螢幕 | 7.6 | 待確認 | 1878 x 2670 | 430 | 最高 120Hz |
提醒：iPhone 17 系列沒有「iPhone 17 Air」，官方名稱是 iPhone Air。iPhone 18 系列目前 Apple 只發表 18 Pro 與 18 Pro Max，標準版 iPhone 18 還沒推出，所以表格沒有列。
摺疊 iPhone Duo 的尺寸確定了嗎？
iPhone Duo 是 Apple 在 2026 年 9 月發表的第一支摺疊 iPhone，2026-10-16 開放預購。外螢幕 5.4 吋、1398 x 2034，內螢幕 7.6 吋、1878 x 2670，數字來自 Apple 新聞稿。
Safari 裡的 CSS 寬高 Apple 沒有公布，第三方說法互相矛盾，這裡先標待確認。
iPhone 尺寸表之外：iPhone Duo 的 App 要怎麼適配與上架？
Apple 已推出 iPhone Duo 的介面適配指南，重點包括展開與收合時的自適應排版、不對稱的安全區域，以及垂直導覽列的配置。另外，自 2027 年 4 月起，提交的 App 與遊戲須提供 iPhone Duo 螢幕截圖。設計指南和上架要求要分開看，不能簡化成「沒做摺疊版就不能上架」。
上架要求：2027 年 4 月起須提供 Duo 截圖
Apple 已公告，從 2027 年 4 月起，提交的 App 與遊戲需要包含 iPhone Duo 的螢幕截圖。現在已經可以提交 Duo 最佳化版本，提供 Duo 截圖後，商店產品頁會顯示最佳化標章。這項公告明確要求的是截圖，不能直接解讀成所有 App 都必須重做一套摺疊專用介面。（來源：Apple Developer 上架公告）
UI／UX 核心：展開、收合都要能正常操作
Apple 的設計方向是讓 App 在兩個螢幕間保持連續的體驗，並依可用空間調整版面。實際設計時，應檢查下列項目。（來源：Duo 介面設計指南）
| 項目 | 實際要處理的事 |
|---|---|
| 自適應排版 | 避免寫死寬度或依機型指定版面，依視窗空間與 Size Classes 調整 |
| 展開與收合 | 切換後內容重新排列，按鈕、文字、表單不能被裁切或跑出畫面 |
| 安全區域 | 使用系統 Safe Area，Duo 的安全區可能左右不對稱 |
| 導覽與工具列 | 使用新 SDK 後，Tab Bar、Toolbar 可能轉成垂直排列，內容要能配合 |
| 方向與多工 | 不能只靠直向或橫向判斷版型，也要測試分割畫面的可用空間 |
以上是 Apple 官方的適配方向，不是要求每個 App 一律使用雙欄版型。（來源：Apple Tech Talks 影片）
既有 App 不一定要立即重做，但 SDK 會影響呈現
Apple 官方列出的差異如下。（來源：Duo 開發準備指南）
| 建置使用的 SDK | Duo 上的呈現 |
|---|---|
| iOS 26 或更早 | 可執行，但展開後以中央視窗呈現，周圍有留白 |
| iOS 27 | 可動態放大，使用大部分內螢幕空間 |
| iOS 27.1 以上 | 使用完整顯示區域，需處理導覽列與工具列垂直排列 |
所以升級 SDK 後要重新測試，不能只重新編譯就送審。
真正會影響審查的，是介面或功能有沒有問題
《App Review Guidelines》2.1 要求 App 完整可用，有明顯技術問題或當機都可能被拒絕，第 4 節也要求基本的設計品質。目前查閱的審查條文中，沒有獨立名為「iPhone Duo」的拒審條款。如果是把現有網站包成 iOS App，還要留意 4.2 Minimum Functionality：只在網站外面包一層殼、缺少足夠的 App 功能與使用價值，也可能無法通過，這和 Duo 適配是兩件事。（來源：App Review Guidelines）
新 iPhone 的網頁要怎麼做？
viewport 一定要設
width=device-width 讓網頁用 CSS 寬度排版，iPhone 17 Pro Max 就是 440px。viewport-fit=cover 讓內容延伸到圓角與動態島周圍。請不要加 user-scalable=no，會影響無障礙。
斷點跟著內容走
iPhone 直向寬度落在 375px 到 440px，展開的 Duo 接近平板。建議以 360px 當最小測試寬度，常用斷點抓 480px、768px、1024px。卡片、商品列表這類元件，用 container queries 處理會比看螢幕寬度穩定。別用 User-Agent 判斷機型，Duo 一樣回報為 iPhone。
安全區域要留
body {
padding-top: env(safe-area-inset-top);
padding-left: max(16px, env(safe-area-inset-left));
padding-right: max(16px, env(safe-area-inset-right));
padding-bottom: env(safe-area-inset-bottom);
}iPhone 17、Air、17 Pro、18 Pro 系列都有動態島，固定在頂部的導覽列要留出 safe-area-inset-top。
全螢幕區塊改用 dvh
Safari 網址列會收合，100vh 常讓底部按鈕被擋住。改用 100dvh，舊瀏覽器保留 100vh 當備援；不希望捲動時版面跳動，可以用 100svh。
120Hz 動畫別寫死 16ms
動畫用 CSS transition、transform、opacity 或 requestAnimationFrame，別用 setInterval 寫死 16ms。使用者開了減少動態，就用 prefers-reduced-motion 關掉大型動畫。
圖片準備 3 倍解析度
所有機型都是 @3x，滿版圖片用 srcset 提供 480w、960w、1320w 等版本，格式用 WebP 或 AVIF 控制檔案大小。
摺疊機要測開合
Duo 開合時網頁不會重新載入，只會觸發 resize，版面要能即時切換。CSS Viewport Segments 目前只有 Chromium 系列支援，Safari 還不支援，網頁抓不到摺痕位置，重要按鈕別放在展開畫面的正中央。
手上的網站在新 iPhone 跑版了？
從 390px 到 440px 的螢幕寬度都要檢查按鈕、表格和圖片。益盛科技的全後台模組化形象網站，手機、平板、桌機都用同一套 RWD 版面維護。
邊距和按鈕要留多大？
兩側邊距抓螢幕寬度的 8% 左右：iPhone 12 與 iPhone 14（390px）約 31px，iPhone 16 Pro Max（440px）約 35px。點擊區域至少 44 x 44 pt，按鈕之間留 8px 到 12px，誤觸會少很多。
iPhone 6 Plus 常被拿來舉例：實體像素 1080 寬，網頁排版用的 CSS 寬度是 414px。寫 CSS 時永遠看 CSS 寬度。
上線前要測哪些項目？
- Xcode Simulator 開 iPhone 17e、17、Air、17 Pro Max、18 Pro Max 與 iPhone Duo。
- 直向、橫向、網址列展開與收合、深色模式都看一遍。
- 沒有橫向捲軸，按鈕不被動態島或底部橫條擋住。
- 跨瀏覽器再補測 Chrome 與 Safari 的差異。
