移动端的兼容问题（安卓和iOS手机）

这里首先说一下，兼容问题只有少数情况需要判断操作，且不常见到。兼容问题有很多版本都不一会，安卓和ios也不一样，一般我们遇到了可以去查相关的资料去解决。

一、怎么判断是安卓还是iOS

	// 获取浏览器的userAgent，并转化为小写
	var ua = navigator.userAgent.toLowerCase();
	// 判断是否是苹果手机，是则为true
	var isIOS = (ua.indexOf('iphone') != -1) || (ua.indexOf('ipad') != -1);
	if(isIOS){
		// 做苹果手机兼容
	}else{
		// 做安卓手机兼容
	}

二、兼容问题

1、禁止图片点击放大

部分安卓手机点击图片会放大，如需要禁止放大，只需要设置css属性，这样会让img标签的点击事件失效，如果想要给图片添加点击事件就要给上面再写一层。

	img{
		pointer-events:none;
	}

2、禁止iOS设别长串数字为电话

	"format-detection" content="telephone=no" />

3、禁止赋值、选中文本

设置CSS属性: -webkit-user-select:none

4、一些情况下对非可点击元素如（label,span）监听点击事件，不会在iOS下触发

css属性增加 cursor:pointer

5、上下拉动滚动条时卡顿、慢

Android3+ 和iOS5+ 支持CSS3的新属性为overflow-scrolling

body{
	-webkit-overflow-scrolling:touch;
	overflow-scrolling:touch;
}

6、安卓不会自动播放视频

安卓手机的autoplay没有生效，需要手动触发一下

	window.addEventListener('touchstart',()=>{
		audio.play();
	},false)

7、半透明的遮罩层改为全透明

在iOS上，当点击一个链接或者通过js绑定了点击事件的元素时，会出现一个半透明的背景，当手指离开屏幕，灰色背景消失，出现“闪屏”

	html,body{
		-webkit-tap-highlight-color:rgba(0,0,0,0);
	}

8、ios系统全屏状态下浏览器上下滚动时会出现底色问题

移动端项目要求是全屏滚动，用的是 fullpage，上下滚动时安卓正常，苹果手机浏览器上下滚动时会出现底色问题

	document.body.addEventListener('touchmove',function (e) {
	   e.preventDefault(); //阻止默认的处理方式(阻止下拉滑动的效果
	}, {passive:false});