苹果手机点击input框 页面放大问题及设置font-size失效问题

记自己开发过程遇到的移动端iPhone手机页面样式问题：

1、IOS手机点击input和 textarea等文本输入框聚焦focus()时，页面会整体放大的问题，且失焦后需手动放小。

　　原因：苹果手机有点击输入框自动放大的功能，认为这样用户体验好。

（1）使用meta设置，在head头加上一个禁止缩放的meta标签：

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

　　属性拆解说明：

　　viewport meta标签：浏览器的viewport指的是 可以看到 Web 内容的窗口区域，通常与渲染出的页面的大小不同，这种情况下，浏览器会提供滚动条以滚动访问所有内容。

　　width属性：控制视口的宽度。可以像width=600这样设为确切的像素数，或者设为device-width特殊值，代表缩放为100%时以CSS像素计量的屏幕宽度。

　　相应的也有height属性及device-height属性，对包含基于视口高度调整大小及位置的元素的页面有用。 

　　initial-scale属性：页面最初加载时的缩放等级，即当页面第一次load的时候的缩放比例。

　　maximum-scale属性：允许用户缩放到的最大比例。

　　minimum-scale属性：允许用户缩放到的最小比例。

　　user-scalable属性：用户是否可以手动缩放。

（2）JS代码修改：

<script>
    //当页面加载完成后触发该函数
    window.onload = function () {
      //e.preventDefault() --- 阻止默认事件
      //当一个手指放在屏幕上时，会触发touchstart事件。如果另一个手指又放在了屏幕上，则会先触发gesturestart事件，随后触发基于该手指的touchstart事件。
      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事件，紧接着又会触发toucheend事件。
      var lastTouchEnd = 0;
      document.addEventListener('touchend', function (event) {
        var now = (new Date()).getTime();
        if (now - lastTouchEnd <= 300) {
          event.preventDefault();
        }
        lastTouchEnd = now;
      }, false);
    };

</script>

　注：我只加了meta标签 但是发现没有用，因此把上面的js代码也加上去，就解决放大的问题了

2、IOS手机input输入框设置font-size样式不生效问题：

　解决方案：

　1、给失效的元素加上 text-size-adjust: none;属性

　2、去除输入框样式，input框兼容css代码：-webkit-appearance: none;

　这时候，再设置font-size就可以成功改变字体大小了。