前几天遇到个问题,提了个bug,h5在安卓里输入框弹出软键盘之后,没有将页面顶起来,这里记录一下我当时遇到的问题,这个破问题卡了我三个多小时最后才解决的。方便下次再遇到的时候能想起来
最开始以为是层级的问题,但是怎么改都不对。
最后才知道 是因为安卓和ios对于包含软键盘的页面可显示区域计算方式不同
安卓计算的是页面可显示的区域,软键盘那块区域不算,所以在body没有固定的情况下就会压缩、顶起
// 仅当安卓的时候动态获取屏幕高度
// 是因为安卓机计算的是页面可显示的区域,软键盘那块区域不算,所以在body没有固定的情况下就会压缩、顶起
if (/android/i.test(navigator.userAgent)) {
const screenHeight = window.innerHeight;
// 包含整个 页面可显示区域的div
const bodyDiv = document.getElementById('task-test-page');
bodyDiv.style.height = screenHeight + 'px';
}