当前位置: 首页 > article >正文

h5页面在安卓手机被软键盘弹起引起的bug

问题

自己写了个fixed定位的popup弹出层,在安卓手机上点击输入框后,软键盘弹起,导致底部按钮被挤上去引起的相关bug

解决思路

fixed定位的元素高度需要确切px值,不能%或者vh
在页面初始化时获取到body高度,写个监听方法,页面高度变化时,给body高度重新设置为初始化获取到的值。

代码

componentDidMount(): void {
   this.setState({windowHeight: window.innerHeight})
   window.addEventListener('resize', this.handleResize.bind(this));
 }

 componentWillUnmount(): void {
   window.removeEventListener('resize', this.handleResize.bind(this));

 }

 handleResize = e => {
   this.setState({windowHeight: this.state.windowHeight})
 }

将windowHeight值赋值给fixed定位的元素,内部需要设置高度的元素可以利用calc加减一定的值


http://www.kler.cn/a/467283.html

相关文章:

  • 详解GPT-信息抽取任务 (GPT-3 FAMILY LARGE LANGUAGE MODELS)
  • 【网络协议】开放式最短路径优先协议OSPF详解(一)
  • 【数据结构】链表(2):双向链表和双向循环链表
  • 数据挖掘——集成学习
  • NLP CH10 问答系统复习
  • SpringMVC(六)拦截器
  • Python 实时获取Linux服务器信息
  • C++Primer 变量
  • 选择IT驻场外包公司,要找有哪些资质的公司
  • 【JAVA】switch ... case ... 的用法
  • OSI模型的网络层中产生拥塞的主要原因?
  • MTR 网络诊断工具实战详解
  • 深度解析如何在Linux中创建自己的第一个系统程序---进度条
  • FastAPI 响应模型与自定义响应
  • 树莓派linux内核源码编译
  • 第四届电子信息与通信工程国际学术会议(EICE 2025)
  • ASCII 码表
  • 【翻译】审慎对齐:推理使更安全的语言模型成为可能
  • ESP32-H芯片:性能卓越的物联网核心
  • C语言----共用体、枚举
  • K210识别技术简介与基础使用方法
  • AcWing练习题:两点间的距离
  • 一文理解ssh,ssl协议以及应用
  • Java基于微信小程序的私家车位共享系统
  • [coredump] 生成管理
  • ELK日志平台搭建 (最新版)