移动端的兼容问题（ios和安卓）

ios和安卓系统存在的兼容问题

1.禁止图片点击放大
部分安卓手机点击图片会放大，如需要禁止放大，只需要设置 css 属性

img{
    pointer-events: none;
}

这个会让 img 标签的点击事件失效，如果想要给图片添加点击事件就要给上面再写一层

2.禁止 iOS 识别长串数字为电话

<meta name="format-detection" content="telephone=no">

 

3.禁止复制、选中文本

// 设置CSS属性 
{ -webkit-user-select:none }

 

4.一些情况下对非可点击元素如(label,span）监听点击事件，不会在 IOS 下触发，css 增加 cursor:pointer 就搞定了

cursor:pointer

 

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

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

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

6 安卓不会自动播放视频

// 安卓autoplay没效果 需要手动触发一下
window.addEventListener('touchstart', function(){
    audio.play(); // 需要主动调用一下js 让视频播放
}, false);

 

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

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

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

 

获取设备是安卓还是ios

判断是安卓还是 IOS的方法 在window下面有一个属性navigator 可以获取设备的信息

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