vue3+vant4 移动端软键盘弹出收起导致项目样式布局错乱解决方案，亲测有效！！

本文主要是介绍vue3+vant4 移动端软键盘弹出收起导致项目样式布局错乱解决方案，亲测有效！！，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

问题描述

最近在做vue3 H5的移动端项目我用的是vue3+vant4，然后在使用过程中发现小米14手机在点击密码输入框软键盘弹出时会导致项目布局整体向上移动导致页面布局错乱。

原因分析：

在移动端软键盘弹出收起时，导致项目样式布局错乱的原因可能有以下几点：

弹出软键盘改变了页面的可视区域大小，可能导致元素被挤压或遮挡。解决方法可以是使用 CSS 的媒体查询来根据可视区域大小调整元素布局。
当软键盘弹出时，浏览器会尝试滚动页面以保持输入框的可见性，可能会导致页面布局错乱。解决方法可以是使用 CSS 的overflow: hidden;属性来禁止页面滚动。
在移动端，软键盘弹出时，输入框可能会获取焦点，导致页面元素被推上去。解决方法可以是使用 CSS 的position: fixed;属性来固定页面元素的位置。
使用 Vant 时，需要注意一些组件在弹出软键盘时可能会出现样式问题，比如弹出层会被遮挡或错位。解决方法可以是修改组件的样式或者使用自定义的样式覆盖默认样式。

总之，处理移动端软键盘弹出收起导致项目样式布局错乱的问题，需要综合考虑页面布局、滚动和元素位置等因素，并使用合适的 CSS 属性和媒体查询来适应不同的场景和设备。

解决方案：

最终我找到了一个有效的解决方案就是在进入项目时获取body的宽度储存在localStorage中，接着监听页面的变化，当页面的高度小于储存在localStorage中的高度时，代表键盘弹出,当高度大于等于localStorage高度代表键盘收起。

将body的高度储存在localStorage 中

const winh = document.body.clientHeight;
window.localStorage.setItem("curwinh", `${winh}`);

接着监听视图的变化，判断当前的body高度是否大于等于最开始的body高度是的话将 app设置为body的高度

window.onresize = () => {const newh = Number(window.localStorage.getItem("curwinh"));if (document.body.clientHeight >= newh) {document.getElementById("app").style.height = newh + "px";}
};

这篇关于vue3+vant4 移动端软键盘弹出收起导致项目样式布局错乱解决方案，亲测有效！！的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！