解决移动端项目中苹果ios和安卓android手机点击输入框网页页面自动放大缩小

一、需求问题

在公司的项目开发中，我们经常需要开发移动端的项目。但是，在移动端中，点击输入框的时候，网页页面会自动放大或者缩小。这个也并不是我们所想要的，我们只需要向输入框中输入内容就可以了。

二、需求分析

针对移动端的这个问题，我们需要分两种情况进行考虑，安卓端和苹果端。如果是对于安卓手机端，我们可以设置名为viewport的meta标签，设置 minimum-scale、maximum-scale和user-scalable的值就可以了。如果是苹果手机端，只设置meta标签的一些值是不起作用的，解决不了移动端点击输入框自动放大缩小。这个时候，我们可以写一个js封装函数去解决，当页面加载完以后就会触发该函数。

三、需求实现

1. 安卓手机端

设置代码如下所示：

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

下面是对于一些参数的说明：

//在移动浏览器上页面渲染是在一个叫viewport的页面绘制区域内

2. 苹果手机ios端

设置的代码如下所示：

<script>
    // 当页面加载完成后触发该函数
    window.onload = function () {

        // e.preventDefault()  ===    阻止默认事件

        // 当一个手指放在屏幕上时，会触发 touchstart 事件。如果另一个手指又放在了屏幕上，则会先触发 gesturestart 事件
        document.addEventListener('gesturestart', function (e) {
            e.preventDefault();
        });

        // 在单个元素上单击两次 ===  dblclick
        document.addEventListener('dblclick', function (e) {
            e.preventDefault();
        });

        // 一个手指放在屏幕上时，会触发 touchstart 事件
        document.addEventListener('touchstart', function (event) {
            if (event.touches.length > 1) {
                event.preventDefault();
            }
        });

        // 如果一个或两个手指在屏幕上滑动，将会触发 gesturechange 事件
        // 但只要有一个手指移开， 就会触发 gestureend 事件，紧接着又会触发基于该手指的 touchend 事件
        var lastTouchEnd = 0;
        document.addEventListener('touchend', function (event) {
            var now = (new Date()).getTime();
            // 如果在300ms内触发两次touchend，就阻止默认事件
            if (now - lastTouchEnd <= 300) {
                event.preventDefault();
            }
            lastTouchEnd = now;
        }, false);
    };

</script>