必须设置viewport meta标签并配合env()函数处理安全区域。iPhone Safari默认以980px渲染，需用width=device-width激活响应式；安全区域需用env(safe-area-inset-top/bottom)留白；REM布局应先媒体查询兜底再JS微调，避免首屏错乱。
viewport 设置不对，页面直接“缩成一团”或“文字小得看不清”
iPhone Safari 默认以 980px 宽度渲染网页，如果没声明 viewport，哪怕你写了 width: 100%，它也会把整个页面缩进一个窄窗口里，导致触摸目标错位、字体发虚、Flex 布局塌陷——这不是 bug，是 Safari 的“桌面兼容模式”在作祟。
- 必须加这行：
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
-
width=device-width是核心，它让虚拟视口宽度 = 设备物理屏幕宽度（如 iPhone 15 Pro 是393px）；initial-scale=1确保不缩放；user-scalable=no防止用户双指误操作放大后布局崩坏 - 别用
width=320或width=375这类固定值——iOS 系统会忽略它，或触发强制缩放逻辑，反而更难控制 - 如果页面要支持横屏切换，记得补充
viewport-fit=cover（尤其 iPhone X 及以后机型），否则刘海区/圆角区内容会被裁掉
本地 HTML 文件打不开交互功能？不是 Safari 的锅，是系统限制
iPhone 自带的“文件”App 和 Safari 都不支持直接执行本地 HTML 文件里的 localStorage、fetch 或 Canvas 动画——这是 iOS 的安全沙盒机制决定的，和 HTML5 标准无关。
- 用 Safari 打开本地文件（比如通过 AirDrop 接收的
index.html），地址栏会显示file:///，此时 JS 脚本可能静默失败，控制台也看不到报错 - 真正能跑全功能的方案只有两个：Documents by Readdle（内置 WebKit 引擎，支持
file://协议 + JS 执行）或 iCab Mobile（可设为默认浏览器，本地文件点击即运行） - 开发调试阶段更推荐：把文件扔进 iCloud Drive，用 Safari 访问
https://www.icloud.com/.../index.html链接——走 HTTPS 就绕过所有本地协议限制
iPhone X 及以后机型的“安全区域”吃掉了你的按钮和导航栏
从 iPhone X 开始，顶部刘海、底部 Home Indicator 区域属于“非安全区域”，CSS 默认会把内容铺满整个屏幕，结果就是关键按钮被遮住、底部 TabBar 被顶起、状态栏文字叠在 Logo 上。
- 必须用 CSS 函数
env(safe-area-inset-top)、env(safe-area-inset-bottom)等来留白，例如：body { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); } - 只靠
@media查询设备宽度没用——iPhone 14 Pro 和 iPhone 15 Pro Max 屏幕宽度都是393px，但安全区域高度不同，必须依赖env() - 如果用了
position: fixed的底部导航，记得加padding-bottom: env(safe-area-inset-bottom)到父容器，而不是直接设bottom: 0，否则 Home Indicator 会盖住按钮
REM 布局算不准？根源常在 font-size 的初始值没随屏幕动态重设
很多人写 REM 布局时，直接在 html 上写死 font-size: 16px，再用 JS 按比例放大——但 iOS Safari 在页面加载早期会强制重置根字号，导致 JS 计算滞后，首屏渲染错乱。
立即学习“前端免费学习笔记（深入）”；
- 推荐做法：用媒体查询做“兜底”，再用 JS 微调。例如先写：
@media (min-width: 375px) { html { font-size: 100px; } } @media (min-width: 414px) { html { font-size: 108px; } } - JS 部分只负责修正小数点后精度，比如检测到
window.innerWidth === 393，就补上document.documentElement.style.fontSize = '103.5px' - 千万别用
rem做动画或过渡的单位——iOS Safari 对 rem 的重绘性能较差，容易卡顿，这类场景统一换px或em
viewport-fit=cover 和 env() 的组合使用——它不报错，也不警告，只是悄悄把你的按钮藏进刘海里。 
