这是一个很神奇的现象，近期弄一个移动端活动页面，需要记录用户手机号获取验证码，一共就两个输入框，一个提交按钮，这个页面一开始为了适配不同的手机屏幕，都采用了宽度百分比设置，再用整个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：表示最小的缩放比例 

妈蛋淡淡的忧伤.....