在移動端開發項目中，發現頁面在使用 iPhone 訪問的時候，點擊 input 和 textarea 等文本輸入框聚焦 focus() 時，頁面會整體放大，而且失去焦點之後頁面不能返回原來的樣子。檢查了下功能上沒有什麼大問題，但是頁面會整體放大，而且失去焦點之後頁面不能返回原來的樣子。對於用戶體驗不 ...
在移動端開發項目中，發現頁面在使用 iPhone 訪問的時候，點擊 input 和 textarea 等文本輸入框聚焦 focus() 時，頁面會整體放大，而且失去焦點之後頁面不能返回原來的樣子。檢查了下功能上沒有什麼大問題，但是頁面會整體放大，而且失去焦點之後頁面不能返回原來的樣子。對於用戶體驗不是很好
最後找到原因：蘋果覺得點擊輸入框放大是一個“很好”的體驗，就擅自把頁面給放大了
可以看到底部有一個橫向滾動條的，無論是對於界面的美觀還是用戶的體驗都很不友好
參照屬性使用mate 設置
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
那麼接下來呢就算是解決了這個問題，小問題記錄一下
mate 說明
apple-mobile-web-app-capable刪除蘋果的預設工具欄和菜單欄。
content 預設值為 no ，即正常顯示。如果設置為 yes，Web應用會以全屏模式運行，可以通過只讀屬性 window.navigator.standalone來確定網頁是否以全屏模式顯示。
viewport meta 標簽：
瀏覽器的 viewport是可以看到 Web 內容的視窗區域，通常與渲染出的頁面的大小不同，這種情況下，瀏覽器會提供滾動條以滾動訪問所有內容。
width 屬性控制視口的寬度。可以像 width=600 這樣設為確切的像素數，或者設為 device-width 特殊值，代表縮放為 100% 時以 CSS 像素計量的屏幕寬度。
相應的也有 height 及 device-height 屬性，可能對包含基於視口高度調整大小及位置的元素的頁面有用。
initial-scale屬性控制頁面最初載入時的縮放等級，即當頁面第一次 load 的時候縮放比例。
maximum-scale屬性控制允許用戶縮放到的最大比例。
minimum-scale 屬性控制允許用戶縮放到的最小比例。
user-scalable 屬性控制用戶是否可以手動縮放。
