问题描述

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

---

原因分析：

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

1. 弹出软键盘改变了页面的可视区域大小，可能导致元素被挤压或遮挡。解决方法可以是使用 CSS 的媒体查询来根据可视区域大小调整元素布局。

2. 当软键盘弹出时，浏览器会尝试滚动页面以保持输入框的可见性，可能会导致页面布局错乱。解决方法可以是使用 CSS 的overflow: hidden;属性来禁止页面滚动。

3. 在移动端，软键盘弹出时，输入框可能会获取焦点，导致页面元素被推上去。解决方法可以是使用 CSS 的position: fixed;属性来固定页面元素的位置。

4. 使用 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";
  }
};