社保网站做员工用工备案吗,优化大师最新版本,智慧团建网页版官网,做网站后台系统的规范问题描述 最近在做vue3 H5的移动端项目 我用的是vue3vant4#xff0c;然后在使用过程中发现 小米14手机在点击密码输入框软键盘弹出 时会导致项目布局整体向上移动 导致页面布局错乱。 原因分析#xff1a;
在移动端软键盘弹出收起时#xff0c;导致项目样式布局错乱的原因…
问题描述 最近在做vue3 H5的移动端项目 我用的是vue3vant4然后在使用过程中发现 小米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;}
};
