解决苹果手机点击input输入框网页页面自动放大缩小问题

简介：

苹果手机当点击input输入框时页面变大

解决：

在头部的meta的content添加user-scalable=no
user-scalable=no ：禁止缩放

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

// 以下为注释

//在移动浏览器上页面渲染是在一个叫viewport的页面绘制区域内。
<meta name="viewport"

// 设置layout viewport 的宽度，为一个正整数，使用字符串”width-device”表示设备宽度
content="width=device-width,

// 设置页面的初始缩放值，为一个数字，可以带小数
initial-scale=1.0,

//允许用户的最小缩放值，为一个数字，可以带小数

minimum-scale=1.0,

//允许用户的最大缩放值，为一个数字，可以带小数
maximum-scale=1.0,

//是否允许用户进行缩放，值为”no”或”yes”, no 代表不允许，yes代表允许
user-scalable=no"/>
　
其实使用meta标签可以解决安卓手机的的放啊或者缩小的问题，但是meta标签在苹果手机上的作用却是 const meta = 0(就是没有作用)苹果手机还有点击input输入框自动放大的功能，认为这样用户体验好。

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>