H5移动端文本输入框高度问题

问题

在移动端h5页面,当页面中包含input、textarea输入框的时候，或者有唤起软键盘的操作时，安卓浏览器下，可视窗口的高度改变，导致页面上的vh重新计算，页面被压扁，图片被压扁变形。ios下的浏览器（safari）没有这个问题。

原因

在ios下，软键盘是叠在可视窗口上面的，也就是不影响可视窗口的大小。但是在安卓，软键盘是在窗口中，即占用窗口的面积。

解决

给viewport设置height值，可用window.innerHeight赋值。

HTML代码

<meta name="viewport" id="viewportMeta">

JS代码

 var initViewport = function(height){
     var metaEl = document.querySelector("#viewportMeta");
     var content = "height=" + height + ",width=device-width,initial-scale=1.0,user-scalable=no";
     metaEl.setAttribute('name', 'viewport');
     metaEl.setAttribute('content', content);
 }
 var realHeight = window.innerWidth > window.innerHeight ? window.innerWidth : window.innerHeight
 initViewport(realHeight);