vh布局移动端软键盘弹起改变高度问题

问题描述

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

原因

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

解决方案

理论：给viewport设置height值，可用window.innerHeight赋值。旋转的时候重新设置

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

head的script标签

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);

屏幕旋转检测

var addEvenListener = function(callback, eventName) {
    let addEvenListenerFn = window.addEventListener || window.attatchEvent;
    let messageEvent = window.addEventListener ? eventName : "on" + eventName;
    addEvenListenerFn(messageEvent, callback, false);
  }
  
addEvenListener(function(){
	setTimeout(function(){
		initViewport(window.innerHeight);
	},300)
},"orientationchange")

如果是用resize检测旋转的话，需要注意有些小身板手机软键盘弹起来后会变成横屏。解决思路就是在页面加载完毕后记一下页面的宽高，在resize的时候判断一下是不是软件盘弹起来了

addEvenListener(function(){
	window.windowSizeSave = {
		height:window.innerHeight,
		width:window.innerWidth
	}
},"load"); 

addEvenListener(function(){
   setTimeout(function() {
    if (
      (Math.abs(window.innerHeight - window.windowSizeSave.height) < 100 &&
       Math.abs(window.innerWidth - window.windowSizeSave.width) < 100) ||
       (Math.abs(window.innerHeight - window.windowSizeSave.width) < 100 &&
        Math.abs(window.innerWidth - window.windowSizeSave.height) < 100)
     ) {
       initViewport(window.innerHeight);
     }
  }, 300);
 }, "resize");

测试机型

iphone safari
iphone chrome
华为 chrome
华为 原生
三星 chrome
三星 原生