必须添加viewport meta标签，否则移动端100vh高度失效；应使用min-height: 100vh替代height: 100vh，并重置body margin；配合flex布局实现内容垂直居中；ios safari需通过js动态修正vh或限制max-height来应对地址栏显隐导致的高度跳变。
viewport 设置必须加，否则自适应高度失效
移动端或响应式页面里，height: 100vh 在 iOS Safari 和部分 Android 浏览器上会因地址栏显隐导致高度跳变，根本原因就是没正确声明视口。不加 <meta name="viewport" content="width=device-width, initial-scale=1">，vh 单位就不可靠。
实操建议：
- 把
<meta>放在最前面，避免被其他脚本干扰 - 不要写
user-scalable=no，它会让 iOS 上的vh计算异常（尤其横竖屏切换时） - 如果项目需兼容老版 UC 或 QQ 浏览器，额外加
maximum-scale=1，但保留user-scalable=yes
用 min-height: 100vh 替代 height: 100vh
height: 100vh 强制固定高度，内容超长时会被截断；min-height: 100vh 才是真正“至少占满一屏，内容多就自动撑开”的行为。
常见错误现象：页面底部留白、滚动条消失、按钮被切掉——基本都是错用了 height。
示例结构：
<div style="min-height: 100vh; background: #f0f0f0">
<header>顶部</header><main>主要内容</main><footer>底部</footer>
</div>
注意： 默认有 margin，不重置会导致上下白边，这是初学者最常漏的点。
Flex 布局让子元素撑满并居中更可靠
仅靠 min-height: 100vh 只能保证容器高度，但内部元素（比如登录框）要垂直居中，纯 CSS 方案里 display: flex 是目前兼容性最好、写法最稳的。
使用场景：全屏登录页、引导页、单页应用主容器。
关键写法：
- 父容器加
display: flex; flex-direction: column;（竖向布局）或flex-direction: row;（横向） - 用
justify-content: center控制主轴居中，align-items: center控制交叉轴居中 - 如果希望头部固定、内容区自适应填满，给内容区加
flex: 1，它会吃掉剩余空间
示例：
<div style="min-height: 100vh; display: flex; flex-direction: column"> <header>导航</header><main style="flex: 1; display: flex; align-items: center; justify-content: center"><div>居中的卡片</div> </main><footer>版权</footer> </div>
iOS Safari 中 vh 动态变化的补救方案
即使加了 viewport，iOS Safari 在地址栏收起/展开时仍会重算 vh，导致页面突然缩放或错位。这不是 bug，是浏览器为视口留出操作空间的设计逻辑。
简单有效的应对方式：
- 用 JS 监听
resize，动态设置style.setProperty('--vh', window.innerHeight * 0.01 + 'px')，CSS 里用height: calc(var(--vh, 1vh) * 100) - 更轻量的做法：对关键容器（如登录框）加
max-height: 80vh防止被拉得过大 - 避免在
vh基础上做精确像素计算（比如top: calc(50vh - 20px)），这种写法在 iOS 上极易偏移
真正复杂的点不在代码长短，而在测试——必须真机横竖屏反复切换，看地址栏进出时布局是否稳定。模拟器和桌面 Chrome 的 Device Toolbar 都无法复现这个行为。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
