问题描述:
- H5安卓拉起键盘时,会挤压页面,使页面布局变形缩小;
- iOS拉起键盘后操作两次,底下会有一块留白;(好早以前了,没有图片了)
简单方案:
直接设置背景图高度即可,背景图不会发生变化
#html
<div><img src="@/assets/xxx-bg.png" ref="bg" :style="{ height }" /></div>
#JavaScript
mounted() {
this.height = window.getComputedStyle(this.$refs.bg).height;
}
安卓:
安卓键盘拉起会占页面高度,类似百分比布局的话,页面就会被压缩,导致变形严重,可以采用当页面高度发生变化的时候,使下面的内容隐藏或者展示
#html -- 使用字符串形式来控制样式,这样就不用去获取节点了
<div :style="display">...</div>
#JavaScript
function androidFcous(){
//安卓适配 键盘弹起页面压缩
const u = navigator.userAgent;
let _this = this;
if (u.indexOf("Android") > -1 || u.indexOf("Linux") > -1) {
//安卓手机
// 获取视图原始高度
let screenHeight = document.body.offsetHeight;
// 为window绑定resize事件
window.onresize = function() {
let nowHeight = document.body.offsetHeight;
if (nowHeight < screenHeight) { //页面缩小, 弹出键盘,隐藏内容
_this.display = "display: none";
} else {
//恢复正常展示内容
_this.display = "";
}
};
}
}
IOS:
IOS留白是因为键盘弹起之后,页面滞留了(个人理解),然后IOS又有一个弹性的拉伸,于是就自己偷偷长高了(留白了), 放在input的blur事件即可
function scrollTop(){ //键盘收起后就让页面拉到初始位置
window.scroll(0, 0)
}
总结:
很多奇怪的兼容可以另辟蹊径,只要用户使用上不影响,可以换个思路,偷梁换柱.