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

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

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

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

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

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

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值