输入框获取焦点 页面放大解决方法

输入框获取焦点 页面放大解决方法

在移动端打开H5的时候 在输入的时候
页面会自动放大 且输入完成后不会自动缩小
用户体验不好

原因

当输入框获取焦点之后触发了webview的displaySoftKeyboard方法 导致页面放大

解决

添加meta标签

1
2
<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;">

apple-mobile-web-app-capable

设置Web应用是否以全屏模式运行 如果content设置为yes Web应用会以全屏模式运行
content的默认值是no 表示正常显示

width=device-width

表示宽度是设备屏幕的宽度

initial-scale=1.0

表示初始的缩放比例

maximum-scale=1.0

表示最大的缩放比例

user-scalable=no

表示用户是否可以调整缩放比例 当前为不可

minimum-scale=0.5

表示最小的缩放比例
# Html

Comments

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×