由于vh在移动端各浏览器上表现不一，有很多是适配问题，如果有tabbar的话， 很容易被遮挡，现在都推荐大家用dhv。
先说一下hv的毛病：
20240827154922.jpg
再看看什么是dhv：
20240827154932.jpg
浏览器支持情况：
20240827154948.jpg
注意：在不支持dhv的情况下， 需要我们手动撸一下下面的代码：
// 首先我们获得视口高度并将其乘以1%以获得1vh单位的值
let vh = window.innerHeight * 0.01;
// 然后，我们将——vh自定义属性中的值设置为文档的根
document.documentElement.style.setProperty('--vh', `${vh}px`);
// 监听resize事件 视图大小发生变化就重新计算1vh的值
window.addEventListener('resize', () => {
// 我们执行与前面相同的脚本
let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);
});
使用：
height: calc(100dvh);
// 降级
height: calc(var(--vh, 1vh) * 100);
网友评论