这是一个很神奇的现象,近期弄一个移动端活动页面,需要记录用户手机号获取验证码,一共就两个输入框,一个提交按钮,这个页面一开始为了适配不同的手机屏幕,都采用了宽度百分比设置,再用整个body页面的宽度为参考,js动态设置了每个元素的高度,安卓和苹果整体页面显示是正常的,但是在苹果手机端,点击输入框页面就会被放的的很大,宽度明明是100%啊,怎么就突然......

手机界面显示正常,点击输入框就放大,怎么破?看这里!-青海Style

百度了很久,翻了不下20个页面,终于找到一个靠谱的答案,原来,点击输入框后,出发了webview事件的displaySoftKeyboard方法,导致页面放大,而且放大后,无法恢复.....

手机界面显示正常,点击输入框就放大,怎么破?看这里!-青海Style

一个普通的思路是,写代码,阻止页面放大,就有了下面这些:

手机界面显示正常,点击输入框就放大,怎么破?看这里!-青海Style

巴特,最后才发现,两句话就能搞定了,

<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: 表示最小的缩放比例

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

手机界面显示正常,点击输入框就放大,怎么破?看这里!-青海Style