必须为iOS Safari嵌入页配置正确viewport meta标签并禁用text-size-adjust：设置width=device-width、initial-scale=1.0、maximum-scale=1.0、user-scalable=no；html/body设width/height 100%且无缩放CSS；全局加-webkit-text-size-adjust:100%；WKWebView需原生层预注入viewport。
viewport meta 标签缺失或配置错误导致 iOS Safari 强制缩放
iOS Safari 在页面没有明确 viewport 声明，或声明中包含 user-scalable=yes、maximum-scale 过大时，会根据内容宽度自动缩放——尤其是嵌入式页面（如 WebView 或 iframe 内页）容易触发“文字过小→自动放大”或“宽容器溢出→整体缩小”的异常行为。
必须确保页面 中存在且仅存在一条精简有效的 viewport 声明：
-
width=device-width是基础，缺它必缩放 -
initial-scale=1.0和minimum-scale=1.0防止首次加载时意外缩小 -
maximum-scale=1.0+user-scalable=no禁用双指缩放（嵌入页通常不需要用户干预缩放） - 不要写成
width=375或固定像素值，这在不同 iPhone 屏幕上会直接崩溃
嵌入页被父容器限制宽度引发 iOS 渲染错乱
当 HTML5 页面被嵌入到 WKWebView、iframe 或第三方容器（如微信内嵌浏览器）中，若父层设置了 overflow: hidden、transform: scale()，或未设置 width: 100%，iOS 会误判视口尺寸，导致 viewport 失效、字体模糊、按钮点击偏移。
关键检查点：
立即学习“前端免费学习笔记（深入）”；
- 嵌入页根元素
和必须设为width: 100%; height: 100%，且无margin、padding - 所有容器级元素避免使用
min-width或max-width超出屏幕逻辑像素（如设min-width: 400px会强制缩放） - 禁用
transform: scale()或zoom类 CSS，iOS 对它们的渲染兼容性极差 - 若用 iframe 嵌入，确保 iframe 元素本身设了
width="100%" height="100%"，且父 div 无flex截断或position: absolute错位
字体大小触发 iOS 自动缩放（text-size-adjust）
iOS Safari 默认开启 text-size-adjust，当页面中出现小于 16px 的字体（尤其 内文本），会主动放大整个区块以提升可读性——这在嵌入页里表现为局部“突然变大”或布局跳动。
解决方案是显式关闭该行为：
html, body, * { -webkit-text-size-adjust: 100%; }- 必须写在全局 CSS 最前，否则可能被组件库覆盖
- 不能只写
body，要带上html和通配符*，因为 iOS 对某些内联元素仍会单独触发 - 注意：关闭后需确保最小字号 ≥
16px，否则文字在弱视模式下可能不可读
WKWebView 侧需额外注入 viewport 元素（原生 iOS App 场景）
如果 HTML5 页面是通过原生 iOS App 的 WKWebView 加载（非 Safari 浏览器），即使网页写了正确 viewport，WKWebView 有时仍忽略它——尤其当页面由 JS 动态插入 DOM 后才补 meta 标签时。
稳妥做法是在 native 层预注入：
- App 启动时，在
WKWebView的configuration.userContentController注入一段 JS，确保在document.head最早时机插入viewportmeta - 或在 native 侧调用
webView.evaluateJavaScript("document.querySelector('meta[name=viewport]') || (function(){...})()")强制补全 - 避免依赖 JS 框架（如 Vue/React）的
mounted钩子去 append meta，那已太晚
这个环节最容易被前端忽略：你以为页面代码没问题，其实是容器没给你执行机会。
