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-26