H5禁止移动端，iPad放大缩小界面

项目中移动端界面可以放大缩小，很丑，就想把放大缩小给禁用掉，然后百度到的方法是给<meta name="viewport" content="width=device-width, initial-scale=1">里面添加user-scalable=no即可

既页面的head标签里面写

<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">

好了，我是安卓，本以为就这样结束了，但是同事的iphone机和iPad拿过来是各种放大缩小都可以，查了一个苹果浏览器不兼容

user-scalable=no，针对苹果，需要用js单独处理，于是乎，找了一串js代码，复制进去，由于我的项目要兼容到ie8，惨了。。。ie8不兼容，会报错。。

于是乎，我又百度了判断浏览器的方法，判断浏览器是苹果浏览器的时候，将禁止放大缩小的js给它添加进去，这样ie8就不会报错了，具体代码如下：

<script>
    //判断是否Safari浏览器
    var userAgent = navigator.userAgent;
    if (userAgent.indexOf("Safari") > -1) {
        // 禁止苹果手机或ipad在放大缩小
        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)
        }
    }
</script>

总结一下就是两部分代码，头部的mate元素以及下面的js都要写，这样才能兼容各种版本