IOS、iPhone移動端，表單input聚焦時頁面放大的解決辦法

• 2019 年 12 月 2 日
• 筆記

最近的一個項目中，發現幾個頁面在使用 iPhone 11 訪問的時候，點擊 input 和 textarea 等文本輸入框聚焦 focus() 時，頁面會整體放大。

經檢查發現並沒有什麼特定的功能是讓頁面放大的，最後找到原因：蘋果覺得點擊輸入框放大是一個「很好」的體驗，就擅自把頁面給放大了，單純的用 meta 禁止頁面放大是沒有用的，可以使用下面兩種方法解決。

通過 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">

拆解說明：

apple-mobile-web-app-capable 刪除蘋果的默認工具欄和菜單欄。

content 默認值為 no ，即正常顯示。如果設置為 yes，Web應用會以全屏模式運行，可以通過只讀屬性 window.navigator.standalone 來確定網頁是否以全屏模式顯示。

1、viewport meta 標籤：

瀏覽器的 viewport 是可以看到 Web 內容的窗口區域，通常與渲染出的頁面的大小不同，這種情況下，瀏覽器會提供滾動條以滾動訪問所有內容。

width 屬性控制視口的寬度。可以像 width=600 這樣設為確切的像素數，或者設為 device-width 特殊值，代表縮放為 100% 時以 CSS 像素計量的屏幕寬度。

相應的也有 height 及 device-height 屬性，可能對包含基於視口高度調整大小及位置的元素的頁面有用。 

initial-scale 屬性控制頁面最初加載時的縮放等級，即當頁面第一次 load 的時候縮放比例。

maximum-scale 屬性控制允許用戶縮放到的最大比例。

minimum-scale 屬性控制允許用戶縮放到的最小比例。

user-scalable 屬性控制用戶是否可以手動縮放。

2、用 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);  };

聲明：本文由w3h5原創，轉載請註明出處：《IOS、iPhone移動端，表單input聚焦時頁面放大的解決辦法》 https://www.w3h5.com/post/450.html