蘋果手機點擊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就可以成功改變字體大小了。