在移动端浏览器（如 iOS Safari 和 Chrome）中，直接使用 height: 100vh 会包含地址栏和工具栏的高度，导致元素高度超出实际可视区域。可以通过 js 动态获取当前可视区域的真实高度。如果被频繁的触发，处于性能考虑可以增加防抖，但是会牺牲用户体验，具体防抖时间需要取舍。
- js 计算高度
const setVH = () => {
document.documentElement.style.setProperty('--vh', `${window.innerHeight * 0.01}px`);
};
window.addEventListener('resize', setVH);
setVH();
- 使用
.my-height {
height: calc(var(--vh, 1vh) * 100); /* 动态适配真实视口高度 */
}
评论区