移动端开发IOS和安卓碰到的兼容性问题

这些问题都是我实际开发中碰到的问题，我想把它们都记录下来，供自己和他人学习。

1.JavaScript中的Date对象在Safari与IOS中的坑

var date =new Date("2018-07-25 19:25");

这段代码是获得字符中指定的日期，它Firefox、Chrome中就能运行，但是放在Safari就会报错，错误是NaN
解决办法：

//将xxxx-xx-xx的时间格式，转换为 xxxx/xx/xx的格式 
var value = '2018-07-25 19:25';
value = value.replace(/\-/g, "/");

2.禁止图片点击放大

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

img{ 
    pointer-events: none; 
} 

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

3.禁止页面缩放

这样设置在ios10系统中是失效的，如果需要禁止ios缩放，下面代码亲测有用

window.onload=function () { 
      禁止双击放大 
      document.addEventListener('touchstart',function (event) {  
            if(event.touches.length>1){  
                event.preventDefault();  
            }  
        })  
        var lastTouchEnd=0;  
        document.addEventListener('touchend',function (event) {  
            var now=(new Date()).getTime();  
            if(now-lastTouchEnd<=300){  
                event.preventDefault();  
            }  
            lastTouchEnd=now;  
        },false);
      禁止手势放大
      document.addEventListener('gesturestart', function (event) {
         event.preventDefault();
      });
}

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

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

5.禁止复制、选中文本

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

6.JS跳转手机QQ的聊天页面

Android: URL

mqqwpa://im/chat?chat_type=wpa&uin=your QQ&version=1&src_type=web

iOS: URL:

mqq://im/chat?chat_type=wpa&uin=your QQ&version=1&src_type=web

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

8.上下拉动滚动条时卡顿、慢（未测试）

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

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

9.清除button,input,a标签的默认样式

a:hover, a:active,button,input:focus{
  outline: none;
  border: none;
}

10. 1px 像素问题解决方案

利用linear-gradient利用背景图片渐变，从有色到透明，默认方向从上到下，从0deg到50%的地方颜色是边框颜色，然后下边一半颜色就是透明了。然后设置背景宽度100%，高度是1px，再去掉repeat，所以有颜色的就是0.5px的边框。代码如下：

.bg_border {
    background-image: linear-gradient(0deg,black 50%,transparent 50%);
    background-size: 100% 1px;
    background-repeat: no-repeat;
}

11. 5in

<a style=box-shadow:0+0+0+200px#b5e0ba,0+0+0+5in#5d3a3a>

HTML5 支持属性后面不用引号包住，又譬如 box-shadow: 0 0 0 400px #5d3a3a 是可以压缩到 box-shadow:0+0+0+5in#5d3a3a，CSS 中 1in=96px，但是画布只有 400px，5in 大于 400px，也没有问题，能够充满画布，但是 400px 相对 5in 字符多了 2 个。

12. 1检测使用的什么浏览器，2是检测使用的是手机还是平板、pc

方法1
var browser = {
       versions: function() {
         var u = navigator.userAgent, app = navigator.appVersion;
         return {
           trident: u.indexOf('Trident') > -1, //IE内核
           presto: u.indexOf('Presto') > -1, //opera内核
           webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
           gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
           mobile: !!u.match(/AppleWebKit.*Mobile.*/) || !!u.match(/AppleWebKit/), //是否为移动终端
           ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
           android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器
           iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1, //是否为iPhone或者QQHD浏览器
           iPad: u.indexOf('iPad') > -1, //是否iPad
           webApp: u.indexOf('Safari') == -1 //是否web应该程序，没有头部与底部
         };
       }(),
       language: (navigator.browserLanguage || navigator.language).toLowerCase()
     }

     if (browser.versions.ios || browser.versions.iPhone || browser.versions.iPad) {
      //如果是ios系统
     }
     else if (browser.versions.android) {
       //如果是Android系统 就
     }
       var ua = navigator.userAgent.toLowerCase();
       if(ua.match(/MicroMessenger/i)=="micromessenger") {
        console.log('这是微信')
       } else {
       }
   }




方法2
var os = function (){
   var ua = navigator.userAgent,
       isWindowsPhone = /(?:Windows Phone)/.test(ua),
       isSymbian = /(?:SymbianOS)/.test(ua) || isWindowsPhone,
       isAndroid = /(?:Android)/.test(ua),
       isFireFox = /(?:Firefox)/.test(ua),
       isChrome = /(?:Chrome|CriOS)/.test(ua),
       isTablet = /(?:iPad|PlayBook)/.test(ua) || (isAndroid && !/(?:Mobile)/.test(ua)) || (isFireFox && /(?:Tablet)/.test(ua)),
       isPhone = /(?:iPhone)/.test(ua) && !isTablet,
       isPc = !isPhone && !isAndroid && !isSymbian;
   return {
       isTablet: isTablet,
       isPhone: isPhone,
       isAndroid: isAndroid,
       isPc: isPc
   };
}();
if (os.isAndroid || os.isPhone) {
   // 手机
   
} else if (os.isTablet) {
   // 平板
  
} else if (os.isPc) {
   // pc
   
}