手機界面顯示正常，點擊輸入框就放大，怎麼破？看這裏！

這是一個很神奇的現象，近期弄一個移動端活動頁面，須要記錄用戶手機號獲取驗證碼，一共就兩個輸入框，一個提交按鈕，這個頁面一開始爲了適配不一樣的手機屏幕，都採用了寬度百分比設置，再用整個body頁面的寬度爲參考，js動態設置了每一個元素的高度，安卓和蘋果總體頁面顯示是正常的，可是在蘋果手機端，點擊輸入框頁面就會被放的的很大，寬度明明是100%啊，怎麼就忽然......

 

百度了好久，翻了不下20個頁面，終於找到一個靠譜的答案，原來，點擊輸入框後，出發了webview事件的displaySoftKeyboard方法，致使頁面放大，並且放大後，沒法恢復.....

 

 

一個普通的思路是，寫代碼，阻止頁面放大，就有了下面這些：

巴特，最後才發現，兩句話就能搞定了，

Markup

<meta content="yes" name="apple-mobile-web-app-capable">
<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">

 

其中：width=device-width：表示寬度是設備屏幕的寬度 

     initial-scale=1.0：表示初始的縮放比例 

     maximum-scale=1.0：表示最大的縮放比例 

     user-scalable=no：表示用戶是否能夠調整縮放比例

還有一個小小的值：

     minimum-scale=0.5：表示最小的縮放比例 

媽蛋淡淡的憂傷.....