美文网首页
解决H5APP中安卓键盘弹起下层UI变形

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

作者: Moryan | 来源:发表于2018-10-08 19:51 被阅读0次

    前:在写项目中遇见了这个问题,具体是注册界面点击输入框输入时候安卓机的键盘弹起会造成底部通过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
    }
    

    相关文章

      网友评论

          本文标题:解决H5APP中安卓键盘弹起下层UI变形

          本文链接:https://www.haomeiwen.com/subject/fmnjaftx.html