js 移动端关于页面布局,如果底部有 position: fixed 的盒子, 又有input,当软键盘弹出收起都会影响页面布局。
如图:
页面这时候Android可以监听resize事件,代码如下,
注意:ios没有相关事件。所以此方法不兼容ios
// 键盘弹出/收起
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('进入到软键盘弹起=========')
} else {
// 当软键盘收起,在此处操作
console.log('进入到软键盘收起=========')
}
})()
}