移动端使用meta标签解决input获取焦点放大页面

在移动端使用的meta标签里，最常用，最重要的一个：

<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

这里面各项的含义：

width=device-width ，使你的页面的宽度width，等于移动设配的宽度；

minimum-scale=1.0 ，maximum-scale=1.0 ,这两个意思是最小和最大的缩放比是1；

user-scalable=no ，最重要的这个代表用户是否可以对页面进行缩放，yes为可以，no为不可以。一般我们将值都设为no,如果允许用户缩放，页面的展示效果并不好。

使用这个meat标签可以让input在一般浏览器上不会放大页面。

在使用meat标签的同时，我一般配合js和css一起用：

js代码为：

window.οnlοad=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)
}

根据查到的说法为这是为了在meat标签失效时，通过js监听touch事件，阻止缩放。

css代码为（没有验证）：

input,input:focus,input:active{user-select: text;-webkit-user-select:text;zoom：1}

css的作用是否起作用没有验证。