uniapp vue 沉浸式窗体如何获取并排除外部手机浏览器底部菜单栏工具栏高度
这个问题可以简称为：uniapp vue 获取可视窗口高度
第一种方案，只改变css样式
/* 不考虑浏览器UI的最小视口高度 */
.element {
height: 100svh; /* small viewport height */
}
/* 考虑浏览器UI变化的动态视口高度 */
.element {
height: 100dvh; /* dynamic viewport height */
}
只需把100vh改为100svh或100dvh
方法简单，一般新的浏览器都支持，但旧的可能不一定
第二种方案，使用 JavaScript 设置 CSS 变量
// 设置真实视口高度
document.documentElement.style.setProperty('--real-vh', `${document.documentElement.clientHeight}px`);
.element {
height: var(--real-vh, 100vh); /* 回退到100vh */
}
document.documentElement.clientHeight是最可靠的方法，因为它直接返回视口高度，不包括滚动条。
原文地址：https://blog.csdn.net/heiye_007/article/details/147954562
免责声明：本站文章内容转载自网络资源，如侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！