移动端原生开发的同学用 webview
嵌了一个 H5 页面,这个页面由于有一个 fix 在底部的按钮。为了在数据没加载完成的时候,按钮也能沉在底部,所以给容器设置了一个默认高度 min-height: 100vh
。
经过测试,这个写法在 Chrome 的手机模拟器和 iOS 下都表现良好,唯独在 Android 中出了问题 —— 起始的时候,按钮缩在了顶部。
排查后发现,在 Android 的 webview
中,window.innerHeight
在初始的时候很小(我测的是 16px
),也就是页面没有因为 100vh
而撑开。
后来又试了 screen.height
获得了屏幕的高度,所以最后的解决方案是放弃使用 100vh
,改在 mounted
阶段手动给外层容器赋上高度值。
但这个方法好像有种“头痛医头,脚痛医脚”的低端感,不知道有没有人也碰到过这个问题,然后有更好的解决方法,还请不吝赐教,谢谢。