解决android和ios的软件盘阻挡输入框的问题

解决android和ios的软件盘阻挡输入框的问题

• android中如果输入框调起软键盘的话是window的height发生了变化，安卓浏览器在软键盘弹出后不会像ios浏览器那样重新计算window的高度，所以导致安卓浏览器window的高度在软键盘弹出的时候为“软键盘的高度＋（window的高度－软键盘的高度）”；而其实，此时，合理的高度应该是页面的高度＋软键盘弹出的高度；

• ios如果调起软键盘的话是body的scrollTop发生了变化

• 软键盘调用的话是有个缓慢升起的动作

ios的解决办法

我们只需要在输入框聚焦之后，开启一个定时器，执行$(‘body’).scrollTop(1000000)，这样由于整个body滚动到了最下面，
输入框自然就看见了

就是说body出现了滚动条，但是滚动的距离为0，所以说软键盘阻挡了输入
框，，其实是溢出的隐藏效果，所以要把body的滚动态条滚动到最高，
然后就显示出所有的内容了

代码 
	function fn1(){   
	//使用闭包，私有化变量和方法，但是闭包占用内存，慎用
		let time=null
		return ()=>{
				clearInterval(time)
				let index=0
				time=setInterval(()=>{
					if(index>5){
						$("body").scrollTop(100000)
						clearInterval（time）
					}
					index+=1
				})
		}
	}
$("input").focus(fn1())

安卓的解决办法

   var winHeight = $(window).height(); //获取当前页面高度
                $(window).resize(function() {
                    var thisHeight = $(this).height();
                    if (winHeight - thisHeight > 50) {
                        //当软键盘弹出，在这里面操作
                        //alert('aaa');
                        $('body').css('height', winHeight + 'px');
                    } else {
                        //alert('bbb');
                        //当软键盘收起，在此处操作
                        $('body').css('height', '100%');
                    }
                });

安卓下大面积触摸会导致触发touchmove的问题

首先是因为触摸的点太多，太大，然后会默认为用户在进行touchmove操作，
所以说需要在执行touchmove事件的时候进行一个判断，
判断两个触摸点是否相同，如果相同，就停止执行move事件

$(function(){
	let startXY={}
	$("document").on("touchstart",(e)=>{
			startXY.x=e.touches[0].pageX
			startXY.y=e.touches[0].pageY
	})
	$("document").on("touchmove",(e)=>{
      if(e.touches[0].pageX==startXY.x){
					return 
      }
      //如果不想等，就执行touchmove的代码
	})
})