应使用min-h-[100dvh]替代h-screen或min-h-screen，并配合flex flex-col布局，因dvh能动态响应软键盘弹出和地址栏变化，而vh在iOS Safari等环境中静态冻结导致内容截断或留白。
直接换掉 h-screen 和 min-h-screen，用 min-h-[100dvh] + flex flex-col 布局，否则 iOS Safari 键盘弹出时必塌、Android WebView 可能直接忽略单位。
为什么 h-screen 在移动端会引发滚动条溢出
它编译为 height: 100vh，而 vh 是静态单位：iOS Safari（尤其 16.3 及更早）不随软键盘弹出更新高度，导致内容被截或底部留白；留白后用户试图滚动，浏览器发现“实际内容高度 overflow-y，于是触发异常重绘或强制拉伸子项——最终表现为纵向滚动条意外出现，或横向因 flex-shrink 压缩导致文字撑宽溢出。
- Android WebView（如华为、UC）可能直接忽略
100vh，回退到auto高度，若父容器有min-h-screen，就可能撑高整个body -
min-h-screen看似安全，但若外层没flex或高度上下文，flex-1子项无空间可分，主区域塌陷，后续内容堆叠挤出视口 - 别信“只在 iOS 出问题”——Chrome on Android 地址栏收放也会让
100vh计算错位，进而影响滚动边界判断
必须配合 flex flex-col 才能生效
min-h-[100dvh] 只设最小高度，不会自动分配剩余空间；没有 flex 布局，flex-1、flex-shrink-0 全部失效，主内容区仍可能被压缩或溢出。
- 结构必须是：
<div class="min-h-[100dvh] flex flex-col"><header></header><main class="flex-1 overflow-y-auto"></main><footer class="flex-shrink-0"></footer></div> -
flex-1要加在主内容区，不是flex-grow单独写——Tailwind 中flex-1=flex: 1 1 0%，含flex-shrink: 1，需配合min-w-0防止长文本撑宽 - 底部固定按钮必须加
flex-shrink-0，否则键盘弹出会把它压扁，视觉上像“被吸走”，实际是 flex 容器重新分配了空间
右侧黑边（水平滚动条）常跟着一起出现
这不是独立问题，而是 100vh 失效后布局连锁反应的结果：主区塌陷 → 内容堆叠 → 某个 ml-40 或 w-full 的图片/卡片右移越界 → 触发横向滚动 → 黑边出现。你加 overflow-x-hidden 无效，说明溢出源在子级容器内。
立即学习“前端免费学习笔记（深入）”；
- 优先检查所有带
ml-/mr-的元素，特别是ml-32、mr-40这类大偏移，在小屏下极易推到视口外 - 替换
w-screen（即width: 100vw）为w-full（即width: 100%）——100vw包含滚动条宽度，100%基于clientWidth，天然防溢出 - 侧边栏抽屉若用
fixed，必须直接加在最外层容器上（如<div id="mobile-menu" class="fixed z-50 inset-y-0 left-0 w-full">），否则外层static容器仍占文档流位置，撑高body引发滚动条
真机测试时最容易忽略的细节
模拟器测不出的问题，往往卡在 viewport meta 和动态尺寸读取上。
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">必须存在且干净，删掉maximum-scale=1和user-scalable=no，否则 iOS 会降级兼容模式，dvh失效 - 用
document.documentElement.clientWidth对比window.screen.width：若前者明显偏小，说明 Safari 自动缩放了页面（常见于未设max-w-none的图片或长单词） -
100dvh在 iOS 16.4+、Chrome 109+ 稳定，但旧版 iOS 需回退——别只写min-h-[100dvh]，补一行min-h-screen在前，CSS 层叠会自动覆盖
