iPhone 安全區模擬器與 CSS 程式碼生成

檢視 iPhone 橫豎屏安全區和螢幕尺寸，演示底部固定按鈕的遮擋與適配，複製 CSS 或 Tailwind 程式碼。

瀏覽器內執行 · 無需註冊

裝置機型

螢幕方向

顯示區域

示意圖；攝像頭開孔與圓角不代表精確外形。

參考邊距 pt

頂部: 0
右側: 84
底部: 34
左側: 0

邏輯螢幕尺寸: 466 × 678 pt
安全區尺寸: 382 × 644 pt
原生解析度: 1398 × 2034 px
渲染倍率: 3×

引數說明

資料更新 2026-09-26

內容留白16 px

iPhone Duo 的邏輯尺寸與邊距採用 iOS 27.1 模擬器參考值，橫屏使用向左旋轉的佈局。內屏保留狀態列；深色塊表示系統保留區域。內屏模擬器邏輯尺寸為 669 × 951 pt，官方物理解析度為 1878 × 2670 px，不能直接按 3 倍換算。本頁演示完全展開和合攏兩種狀態，不代表真機實測。

自適應佈局程式碼

程式碼讀取即時 env() 值，不寫死所選機型的數值。留白設定會更新程式碼，演示開關只用於對比。頁面已為固定欄和 44px 按鈕預留空間；更高的內容、Safari 與 PWA 行為仍需在專案中驗證。

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

<style>
  .safe-page {
    box-sizing: border-box;
    min-height: 100dvh;
    padding: 16px;
    padding-top: calc(16px + env(safe-area-inset-top, 0px));
    padding-right: calc(16px + env(safe-area-inset-right, 0px));
    padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    padding-left: calc(16px + env(safe-area-inset-left, 0px));
  }
  .safe-bottom-bar {
    position: fixed;
    inset: auto 0 0;
    box-sizing: border-box;
    padding: 16px;
    padding-right: calc(16px + env(safe-area-inset-right, 0px));
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    padding-left: calc(16px + env(safe-area-inset-left, 0px));
    background: #fff;
    color: #171717;
  }
  .safe-bottom-bar button { min-height: 44px; width: 100%; }
</style>

<main class="safe-page"><!-- Page content --></main>
<footer class="safe-bottom-bar"><button>Continue</button></footer>

當前瀏覽器的安全區

正在讀取瀏覽器引數…

這裡是當前瀏覽器的即時 CSS px 讀數，與所選機型預設無關。桌面或矩形視口下為 0 可能是正常結果；旋轉、調整視窗後讀數可能變化。此功能不識別你的機型，也不模擬 Safari。

iPhone 安全區參考表

表中為標準顯示縮放、狀態列可見時的豎屏邏輯點（pt）。安全區寬高為邏輯螢幕尺寸減去對應兩側邊距，預設資料不能替代真機測試。

iPhone 安全區參考表 — 豎屏
裝置機型	邏輯螢幕尺寸	頂部 (pt)	底部 (pt)	右側 (pt)	安全區尺寸
iPhone Duo · 外屏 · 合攏	466 × 678	0	34	84	382 × 644
iPhone Duo · 內屏 · 展開	669 × 951	82	34	0	669 × 835
iPhone 16 Pro	402 × 874	62	34	0	402 × 778
iPhone 16 Pro Max	440 × 956	62	34	0	440 × 860
iPhone 14 Pro	393 × 852	59	34	0	393 × 759
iPhone 13 mini	375 × 812	50	34	0	375 × 728
iPhone 12	390 × 844	47	34	0	390 × 763
iPhone 11	414 × 896	48	34	0	414 × 814
iPhone X	375 × 812	44	34	0	375 × 734
iPhone SE (3rd gen)	375 × 667	20	0	0	375 × 647

使用方法

選擇機型和螢幕方向，檢視參考尺寸與安全區邊距。
切換到佈局演示，開關安全區適配並調整留白，比較按鈕位置。
複製 CSS 或 Tailwind 程式碼，在目標瀏覽器與裝置上驗證。

範例

padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));

功能與限制

CSS 畫素、原生布局點與物理畫素是不同單位。iPhone 13 mini 使用 3 倍渲染後縮小至原生解析度。

安全區可能隨系統版本、顯示縮放、瀏覽器欄和應用佈局變化。圖中的開孔外形僅用於說明，不作為生產設計模板。

FAQ

為什麼當前瀏覽器顯示 0px？

矩形視口可能沒有需要避開的區域。即使選了 iPhone 預設，桌面瀏覽器也通常返回 0；選擇預設不會改變真實瀏覽器環境。

可以直接寫死底部 34px 嗎？

建議使用 env(safe-area-inset-bottom, 0px) 併疊加所需留白。固定數值無法適配橫屏、其他機型與不同的瀏覽器狀態。

工具頁面更新日期： 2026-09-27