移动端通过css3的vh单位适配页面高度，核心在于解决视口计算基准不一致导致的布局错位。直接做法是结合`100vh`与`100dvh`（动态视口高度），或在旧版浏览器中利用javascript修正`window.innerheight`与`document.body.offsetheight`的差异。具体实现时，优先使用`min-height: 100dvh`作为根容器基准，若需兼容不支持dvh的环境，则通过js监听`resize`事件动态计算并覆盖css变量。这样做能确保在地址栏隐藏或显示、键盘弹出等场景下，页面始终填满可视区域且不被遮挡。
为什么纯vh在移动端会失效？
纯`100vh`在移动端失效是因为它基于“初始包含块”（Initial Containing Block），即屏幕物理分辨率对应的固定高度，而不随浏览器UI元素（如顶部地址栏、底部工具栏）的动态变化而调整。当用户滚动页面或浏览器UI收缩时，`100vh`计算的像素值往往大于实际可用空间，导致底部内容被遮挡或出现多余滚动条。要解决这个问题，必须引入动态视口概念或使用脚本干预。
/* CSS部分 */
:root {
--vh: 1vh;
}
html, body {
height: calc(var(--vh) * 100);
margin: 0;
padding: 0;
}
// JavaScript部分
function setVH() {
let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);
}
window.addEventListener('resize', setVH);
setVH(); // 初始化调用
上述代码通过JS获取当前窗口高度，将其除以100得到1vh的实际像素值，并赋值给CSS变量`--vh`。随后在CSS中使用`calc()`计算总高度。这种方式在所有支持CSS变量的现代浏览器中均有效，能完美应对地址栏伸缩带来的高度变化。注意，此方案仅处理高度适配，不涉及宽度或其他布局属性。
dvh单位如何替代传统vh方案？
`dvh`（Dynamic Viewport Height）是CSS3新增的单位，专门用于解决移动端视口高度动态变化的问题。它自动根据浏览器UI状态调整基准高度：当地址栏和工具栏可见时，`100dvh`等于当前可视区域高度；当它们隐藏时，`100dvh`扩展至全屏高度。相比JS方案，`dvh`无需额外脚本，性能更优且代码更简洁。目前主流移动浏览器（iOS Safari 15+、Android Chrome 108+）已全面支持。
/* 推荐写法 */
body {
min-height: 100dvh;
display: flex;
flex-direction: column;
}
main {
flex: 1;
overflow-y: auto;
}
该示例中，`body`设置`min-height: 100dvh`确保容器至少占满动态视口，`flex`布局使主内容区自适应剩余空间。若需兼容不支持`dvh`的旧设备，可回退到`vh`并叠加JS修正逻辑。例如：`height: 100dvh; height: 100vh;`，浏览器会优先采用支持的单位。对于极端老旧环境，仍需依赖前文所述的JS方案。
键盘弹出时如何保持布局稳定？
当移动端输入框获得焦点触发虚拟键盘时，视口高度会骤减，导致原本适配好的布局错乱。此时`dvh`能自动响应新的高度，但若页面存在固定定位元素（如底部导航栏），可能仍会与键盘重叠。解决方法是将固定定位改为绝对定位，并结合`env(safe-area-inset-bottom)`处理刘海屏安全区。同时，避免使用`position: fixed`包裹需要随键盘滚动的内容。
footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding-bottom: env(safe-area-inset-bottom);
}
此代码将页脚设为绝对定位，使其随文档流滚动而非固定悬浮，从而避开键盘遮挡。`env()`函数读取系统定义的安全边距，确保内容不侵入刘海或圆角区域。测试时需模拟键盘弹出场景，验证底部元素是否始终可见且不重叠。若使用框架如React Native或Flutter，需参考其内置的键盘管理API，而非单纯依赖CSS。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
