記自己開發過程遇到的移動端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就可以成功改變字型大小了。