解决H5APP中安卓键盘弹起下层UI变形

前:在写项目中遇见了这个问题,具体是注册界面点击输入框输入时候安卓机的键盘弹起会造成底部通过position:fixed布局的按钮会随之弹起造成UI变形。也百度谷歌了很多,可能水平不够很多都没成功,最后自己在这里记录下我解决的代码。

JS部分

      var minWinHeight = 0;
      var winHeight = $(window).height();
      /*minWinHeight是表示键盘弹起的宽度,这边有着不定性,
      所以我使用了朋友的三星长屏手机估算了个大致的值50。*/
      minWinHeight = winHeight - 50;
      //解决小键盘唤醒底部按钮问题
      $(window).resize(function() {
          winHeight = $(window).height();
          if(winHeight > lastWinHeight){
        $('.footer').removeClass('hide');           
        }else{
        $('.footer').addClass('hide');
        }
      })

CSS部分

//笔者使用这种,具体三种根据情况决定。
.hide:{
    index:-10;
}
//或者
.hide:{
  opacity:0
}
//或者
.hide:{
  display:none
}
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容