iphone safari 渲染 bootstrap 弹性布局异常的根本原因是 ios 15 及更早版本对 vh、flex、sticky 和 backdrop-filter 的实现偏差，叠加 viewport 设置错误、父容器样式干扰或加载顺序问题；必须写全 viewport meta，慎用 flex 简写，优先用 dvh 替代 vh，sticky 需加 -webkit-sticky 并避免祖先 overflow 或 transform。
iPhone 上 Safari 渲染 Bootstrap 弹性布局异常，根本原因不是“不兼容”，而是 Safari（尤其 iOS 15 及更早）对 vh、flex、position: sticky 和 backdrop-filter 的实现与标准存在偏差，且容易被 viewport 设置、父容器样式或加载顺序悄悄破坏。
viewport meta 写错或缺失，所有响应式逻辑直接失效
这是最常被忽略的起点。没有正确 <meta name="viewport">，Safari 就不会触发 Bootstrap 的断点媒体查询，.navbar-expand-md 不折叠，.col-sm-6 按桌面宽度计算，flex-wrap 看似写了却毫无反应。
- 必须写全：
<meta name="viewport" content="width=device-width, initial-scale=1.0"> - 删掉
maximum-scale=1或user-scalable=no——iOS 16+ 已忽略它们，还可能强制降级到兼容模式，导致dvh和visualViewport失效 - 真机上
window.innerWidth返回980？基本就是 viewport 缺失，或写成了width=375这类固定值
flex 布局在 Safari 12–14 中换行错位或等高失效
旧版 WebKit 对 flex-basis 和 min-width 的交互解析有缺陷，不是你 class 写错了，是 Safari 把它算歪了。
- 别依赖
min-width: 0控制换行；改用flex-basis: 0+flex-grow: 1 - 给
flex-wrap: wrap容器显式加align-content: flex-start，可修复 Safari 10.x 的换行断裂 - 禁用
flex: 1简写——Safari 13.1 解析不稳定，拆成flex-grow: 1; flex-shrink: 1; flex-basis: 0% - 确保
.col-*是.row的**直接子元素**；中间插了<form></form>或<section></section>，Flex 就彻底失效
vh 单位在 Safari 中动态高度不准，导致内容截断或滚动穿透
iOS Safari 的 vh 会把地址栏高度算进去，页面滚动时值突变，min-vh-100 有时撑不满，vh-100 又可能截断内容。
-
min-vh-100比vh-100更稳妥，但仅限内容不超长场景 - 真正需要“满屏适配”的（如弹窗、固定底部按钮），用
height: 100dvh+@supports (height: 100dvh)包裹 - iOS 15 及更早必须 JS 动态设置 CSS 变量
--vh，并监听resize和orientationchange -
align-items-center不生效？检查父容器是否加了d-flex——min-vh-100自身不启用 Flex，缺了它就白搭
modal 和 sticky 在 Safari 中“锁不住”滚动或“粘不住”顶部
Bootstrap 4/5 的 modal-open 和 sticky 行为在 Safari 中极其脆弱，失效往往不是 JS 没跑，而是 CSS 规则被覆盖或退化。
-
modal-open被覆盖：确保自定义 CSS 加载在 Bootstrap CSS **之后**，并在末尾加兜底body.modal-open { overflow: hidden !important; } -
position: sticky失效：必须按顺序写position: -webkit-sticky;在前，position: sticky;在后；overflow-y: hidden加在任何祖先元素上都会让它退化为static - 父容器含
transform、filter或will-change？sticky 会静默失效；可用translateZ(0)替代，但注意它可能干扰backdrop-filter
真正难处理的从来不是“怎么写”，而是 Safari 那些不报错、不警告、只悄悄偏离标准的行为——比如 vh 值飘忽、flex-basis 计算偏差、modal-open 类被覆盖却不提示。调试时别只看 DevTools 里 class 有没有，要查 computed 样式里 flex-basis 是不是百分比、overflow 是不是 hidden、height 是不是真的 100vh。
