美文网首页
解决安卓平台下,input标签遮挡问题

解决安卓平台下,input标签遮挡问题

作者: 我不是你煌哥哥 | 来源:发表于2017-12-02 22:29 被阅读0次

    在单页面情况下,安卓平台下会产生input标签遮挡的问题,这里提供一种解决方案,最后的效果是类似ios一样把整个页面网上移,使用户可以通过拖动来浏览网页,当收起键盘,页面恢复原状。
    css部分:

    body{
      width:100%;
      height:100%;
      overflow:scroll;
    }
    .container{  
    width: 100%;  
    height: (这里随意,需要用js设定);  
    position: absolute;  
    top: 0;  
    }  
    
    

    js部分:

    var winHeight = document.documentElement.clientHeight;  
    $('.container').css('height',winHeight+'px');  
    alert(winHeight+'-'+$('body').height()) 
    

    不能直接设置container高度为100%,因为当键盘出现时,他的高度会跟随body的高度被键盘压缩,当用js设定container的高度后,body被压缩时,container的高度会溢出body,从而产生可以拖动的效果

    相关文章

      网友评论

          本文标题: 解决安卓平台下,input标签遮挡问题

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