iOS中H5页面调起键盘后页面变大的问题

iOS开发中，H5页面一般都会做客户端适配，比如在header标签中添加viewport的meta标签，设置宽高100%适配或使用device-width适配宽度，在初始化webview时，客户端一般会再做一层适配，添加width=device-width属性：

let jScript = """
var meta = document.createElement('meta');
meta.setAttribute('name', 'viewport');
meta.setAttribute('content', 'width=device-width');
document.getElementsByTagName('head')[0].appendChild(meta);
"""

但是在有输入框的H5页面，调起键盘后仍然会使页面放大、输入框被顶出页面顶部等问题。解决方法是，在适配屏幕的JS中添加 initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0，使初始缩放为1倍（即不缩放），且禁止用户缩放（因为最大最小缩放都为1倍）。完整的适配JS代码：

let jScript = """
var meta = document.createElement('meta');
meta.setAttribute('name', 'viewport');
meta.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no');
document.getElementsByTagName('head')[0].appendChild(meta);
"""

在JS中，viewport属性：

width：viewport的宽度

height：viewport的高度

initial-scale：初始的缩放比例

minimum-scale：允许用户缩放到的最小比例

maximum-scale：允许用户缩放到的最大比例

user-scalable ： 用户是否可以手动缩放