IOS移动端，表单input聚焦时页面放大的问题解析以及解决办法

问题原因：

      在移动端开发H5项目中，发现页面在使用 iPhone 访问的时候，点击 input 和 textarea 等文本输入框聚焦 focus() 时，页面会整体放大，而且失去焦点之后页面不能返回原来的样子。

苹果觉得点击输入框放大是一个“很好”的体验，就擅自把页面给放大了，触发机制，IOS端input字体应大于15px，否则系统会自动触发聚焦放大。

解决方案：

方法一  因为触发这个问题的本质是因为ios端 字体小于等于15px就会触发自动放大问题，所以直接修改字体为16px，然后把组件整体缩放。达到UI效果。未测试。

下两种是网上搜索最多的方法

方法二  使用mate标签强制禁止，安卓端有效，ios在10以后的版本中不接受mata标签

方法三  禁止手势触发，很多版本也说这个方法，亲测无效个人认为引发问题的原因是字体小于等于15px系统自发的放大，并非人为放大触发。

并无针对性，只是对技术的探讨。有不同的见解欢迎一起探讨

方法一：修改字体大小

input, input:focus,
textarea, textarea:focus,
select, select:focus {
  font-size: 16px !important;
}

方法二：mate 设置

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

方法二：用 JavaScript 强制修改：通过阻止手指触发放大

window.onload = function () {
  document.addEventListener('gesturestart', function (e) {
    e.preventDefault();
  });
  document.addEventListener('dblclick', function (e) {
    e.preventDefault();
  });
  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);
}