问题描述
在移动端使用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
三星 原生