https://stackoverflow.com/a/72245072/2368737学会一个前端的坑。如果你把高度设置为 100vh 试图占满浏览器的高度,这在桌面上没问题。
但是在手机浏览器上,浏览器的 navigator(地址栏)会占掉一点高度,而这个高度不会计算在 vh 里,结果就是你的 document 的实际高度会超出浏览器里的可视高度,然后你的页面就会在垂直方向上变成滚动(或者被截断,如果你将 overflow 设置为 hidden)。
这个恶心的现象在桌面版的 Chrome DevTools 里也无法调试,因为 Toggle Device Toolbar 模拟的 mobile 页面并不会包含 navigator。
在现代浏览器上,应该使用 svh 来获取 navigator 下方的,真实的页面可视高度。实测在最新版的 ios safari 和 chrome 上都可使用。
https://caniuse.com/?search=dvh#FE