height: 100vh 在 Android 的 Webview 中失效了怎么办?

移动端原生开发的同学用 webview 嵌了一个 H5 页面,这个页面由于有一个 fix 在底部的按钮。为了在数据没加载完成的时候,按钮也能沉在底部,所以给容器设置了一个默认高度 min-height: 100vh

经过测试,这个写法在 Chrome 的手机模拟器和 iOS 下都表现良好,唯独在 Android 中出了问题 —— 起始的时候,按钮缩在了顶部。

排查后发现,在 Android 的 webview 中,window.innerHeight 在初始的时候很小(我测的是 16px),也就是页面没有因为 100vh 而撑开。

后来又试了 screen.height 获得了屏幕的高度,所以最后的解决方案是放弃使用 100vh,改在 mounted 阶段手动给外层容器赋上高度值。

但这个方法好像有种“头痛医头,脚痛医脚”的低端感,不知道有没有人也碰到过这个问题,然后有更好的解决方法,还请不吝赐教,谢谢。

发布了50 篇原创文章 · 获赞 0 · 访问量 1809

猜你喜欢

转载自blog.csdn.net/weixin_44273383/article/details/105688276