问题描述: H5安卓拉起键盘时,会挤压页面,使页面布局变形缩小;
iOS拉起键盘后,底下会有一块留白;(没有图片例子,要是忘了就算了吧)
安卓:
安卓键盘拉起会占页面高度,类似百分比布局的话,页面就会被压缩,导致变形严重,可以采用当页面高度发生变化的时候,使下面的内容隐藏或者展示
1 function Android(){ 2 //安卓适配 键盘弹起页面压缩 3 const u = navigator.userAgent; 4 let that = this; 5 if (u.indexOf("Android") > -1 || u.indexOf("Linux") > -1) { 6 //安卓手机 7 // 获取视图原始高度 8 let screenHeight = document.body.offsetHeight; 9 // 为window绑定resize事件 10 window.onresize = function() { 11 let nowHeight = document.body.offsetHeight; 12 if (nowHeight < screenHeight) { 13 that.display = "display: none"; 14 } else { 15 that.display = ""; 16 } 17 }; 18 } 19 }
iOS:
iOS留白是因为键盘弹起之后页面滞留了(个人理解),iOS又有一个弹性的拉伸,就留白了(我以为我没变,其实我偷偷长高了)
1 function scrollTop() { //键盘收起后就让页面拉到初始位置 2 window.scroll(0, 0); 3 }
以上,另: H5是整页
PS: 很多奇怪的兼容可以另辟蹊径,只要用户使用上影响不大,可以偷换概念的兼容.