h5端移动端软键盘弹起改变高度问题

最新推荐文章于 2023-08-14 09:11:42 发布

原创最新推荐文章于 2023-08-14 09:11:42 发布 · 6.8k 阅读

20 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

前端专栏收录该内容

16 篇文章

订阅专栏

在移动端H5页面中，当安卓浏览器的input或textarea触发软键盘时，会导致可视窗口高度变化，进而挤压页面内容。与iOS不同，安卓软键盘占据窗口部分区域。为解决这一问题，可以设置viewport的height值为window.innerHeight，以保持页面在键盘弹出后的正常显示。通过监听窗口大小变化和键盘事件，可以确保页面在各种场景下适应性良好。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题描述

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

原因

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

解决方案

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

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

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

亲测在键盘谈起、屏幕旋转的情况下，可使页面正常显示