iPad竖屏宽768px常卡断点临界值，导致col-md-*错行、form-inline堆叠、对齐偏差；主因是Safari缩放、viewport干扰及Flex渲染不稳定，需用row+col替代form-inline、统一图片宽高比、强制align-items-center并关闭系统缩放。
iPad 屏宽落在 Bootstrap 的 md（768px）断点附近，但实际渲染常卡在临界值边缘，导致列宽计算抖动、form-inline 失效、或 col-md-* 在 Safari 中未触发预期行为——这不是 bug，是断点阈值与设备像素比、缩放、viewport 设置共同作用的结果。
检查 viewport 是否被 Safari 缩放干扰
iPad 默认可能启用“自动缩放”或“页面适应”，导致 CSS 媒体查询读到的 width 与声明断点不一致。
- 确保
<meta name="viewport" content="width=device-width, initial-scale=1">存在且未被 JS 动态覆盖 - 禁用 Safari 的“显示完整网页”选项（地址栏右侧的 aA 按钮 → 取消勾选），否则它会强制缩放整个视口，让
@media (min-width: 768px)实际失效 - 在 DevTools 的 Device Toolbar 中手动设为 “iPad Pro” 并勾选 “Disable device emulation”，再看真实尺寸（常为 834×1194 或 1024×1366）
form-inline 在 iPad 上突然垂直堆叠
Bootstrap 5 的 form-inline 仅在 min-width: 992px（lg）才启用 display: flex；而多数 iPad 横屏为 1024px，竖屏为 768px —— 竖屏下刚好卡在 md 和 lg 之间，form-inline 回退为 display: block，控件全堆成一列。
- 别依赖
form-inline做响应式横排，改用显式row+col：<div class="row align-items-center g-2"><label class="col-auto col-form-label">邮箱</label><div class="col"><input class="form-control"></div></div> - 若必须保留 inline 行为，加自定义类：
.form-inline-ipad { display: flex !important; flex-wrap: wrap; gap: 0.5rem; }，并在@media (min-width: 768px)中启用 - 避免在
form-inline内嵌input-group—— 它的display: table会破坏 flex 主轴，Safari 尤其敏感
col-md-4 卡片在 iPad 竖屏错行、高度不齐
iPad 竖屏宽度 ≈ 768px，刚好触发 col-md-4，但 Safari 对 Flex 的 align-items: stretch 支持不稳定，尤其当卡片内图片异步加载、文字行数不一、或有 margin-bottom 时，row 无法拉齐子项高度。
- 每个卡片组必须独立包
<div class="row">，不要把所有col-md-4堆在一个row里 —— 否则短卡片会让下一行上移，视觉“塌陷” - 给
row加style="align-items: stretch;"（Bootstrap 5 默认有，但某些重置 CSS 会覆盖） - 图片统一加
height: auto; aspect-ratio: 16/9;或占位padding-top: 56.25%;，防止加载完成前高度跳变 - 删掉所有对
col-md-4的height、min-height或flex-basis手动设置 —— 这会干扰 Flex 自动等高
label 和 input 在 iPad 上视觉偏移、不对齐
即使用了 row align-items-center，Safari 渲染 form-control 的边框和 form-label 的基线仍有细微偏差，人眼感知为 label “悬空”或 input “下沉”。
- 必须加
align-items-center到row—— 不是可选项，是 Safari 下对齐的硬性前提 - 如果 label 文字换行（如 iPad 竖屏下长 label 被压缩），
col-auto会撑宽，挤占 input 空间；此时改用col-sm-3 col-lg-2显式控制 label 宽度 - 对
form-control手动加padding-top: 0.375rem; padding-bottom: 0.375rem;（Bootstrap 默认值），避免 Safari 计算内边距时微小误差放大 - 禁用
form-floating做水平布局 —— 它本质是定位覆盖，不是流式对齐，在 iPad 上易出现 label 浮动位置漂移
最常被忽略的是：iPad 的“缩放级别”和“字体大小设置”会直接影响 rem/em 计算，进而让断点判定偏移 1–2px；调布局前先确认系统设置里的“更大字体”和“显示缩放”是否关闭。
