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

2017-12-02  本文已影响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,从而产生可以拖动的效果

上一篇 下一篇

猜你喜欢

热点阅读