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

醉前端
  • 174
  • 移动端页面,底部用了fixed定位

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

  • 页面上下部显示不正常

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

回复
阅读 4.7k
2 个回答
醉前端
  • 174
✓ 已被采纳

我的解决方法(完美兼容安卓和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
        })
    }
});

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏