移动端页面input fixed兼容性问题

Question

• 移动端页面，底部用了fixed定位

• 点击页面下步input虚拟键盘弹出

• 页面上下部显示不正常

• 看了好多没找到解决方案

Answer 1

我的解决方法（完美兼容安卓和ios）如下：

采用resize事件，键盘弹出收起均会触发resize事件，键盘弹起时windown.innerHeight是小于窗口可视化高度的，进而对fixed定位的按钮进行显示隐藏即可。

// 窗口高度
const H = window.innerHeight;

// 页面初始化后绑定resize方法
window.addEventListener('resize', () => {
    if(window.innerHeight < H){
       // 隐藏按钮(原生js进行按钮隐藏，这里是react)
       this.setState({
           showBtn: false
       })
    }else{
        // 显示按钮
        this.setState({
            showBtn: true
        })
    }
});

Answer 2

底部用的fix定位 应该单独拿出来写 分离于其他页面之外