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是最可靠的方法，因为它直接返回视口高度，不包括滚动条。