问题描述
在移动端使用vh布局。当页面中包含input、textarea输入框的时候，或者有调起软键盘的操作时，安卓浏览器下，可视窗口的高度改变，导致页面上的vh重新计算，页面被压扁。ios下的浏览器（safari）没有这个问题。
原因
在ios下，软键盘是叠在可视窗口上面的，也就是不影响可视窗口的大小。但是在安卓，软键盘是在窗口中，即占用窗口的面积。
解决方案
理论：给viewport设置height值，可用window.innerHeight赋值。旋转的时候重新设置
<meta name="viewport" id="viewportMeta">
js设置
var initViewport = function(height){var metaEl = document.querySelector("#viewportMeta");var content = "width=device-width,initial-scale=1.0,user-scalable=no,maximum-scale=1.0,height=" + height;metaEl.setAttribute('name', 'viewport');metaEl.setAttribute('content', content);}initViewport(window.innerHeight);
注：以上修改后高度不会随着键盘弹起而改变，潜在问题是键盘弹起时会遮盖底部内容
如果觉得《移动端vh布局软键盘弹起改变高度问题》对你有帮助，请点赞、收藏，并留下你的观点哦！
