关于前端:vueH5解决安卓手机软键盘弹出页面高度被顶起

40次阅读

共计 747 个字符,预计需要花费 2 分钟才能阅读完成。

已测试, 可解决问题

const originalHeight=document.documentElement.clientHeight ||document.body.clientHeight;

            window.onresize = ()=>{return(()=>{
                    // 键盘弹起与暗藏都会引起窗口的高度发生变化
                    const resizeHeight=document.documentElement.clientHeight || document.body.clientHeight;
                    console.log("进入到判断页面高度 =========");
                    console.log("页面初始高度 ========="+originalHeight);
                    console.log("软键盘弹起高度 ========="+resizeHeight);
                    if(resizeHeight-0<originalHeight-0){
                    // 当软键盘弹起,在此处操作
                    console.log("进入到软键盘弹起 =========");
                        document.querySelector('body').setAttribute('style', 'height:'+originalHeight+'px;');
                        this.scrollerHeight=resizeHeight;
                    }else{
                    // 当软键盘收起,在此处操作
                    console.log("进入到软键盘收起 =========");
                    document.querySelector('body').setAttribute('style', 'height:100%;');
                    this.scrollerHeight="100%";
                    }
                })()}

正文完
 0