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

问题描述

最近在做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";}
};

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/597671.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于STM32的ESP8266 WiFi模块数据采集与显示

基于STM32的ESP8266 WiFi模块数据采集与显示是一种常见的嵌入式系统应用,通常用于远程数据监测和控制。在这种应用中,STM32作为主控制器负责采集周围环境的数据,通过ESP8266 WiFi模块将数据发送到远程服务器,并在远程服务器上进行…

03-微服务-Ribbon负载均衡

Ribbon负载均衡 1.1.负载均衡原理 SpringCloud底层其实是利用了一个名为Ribbon的组件,来实现负载均衡功能的。 那么我们发出的请求明明是http://userservice/user/1,怎么变成了http://localhost:8081的呢? 1.2.源码跟踪 为什么我们只输入…

小梅哥Xilinx FPGA学习笔记20——无源蜂鸣器驱动设计与验证(音乐发生器设计)

目录 一:章节导读 二:无源蜂鸣器驱动原理 三:PWM 发生器模块设计 3.1 PWM 发生器模块框图 3.2 PWM 发生器模块接口功能描述 3.3 PWM波生成设计文件代码 3.4 测试仿真文件 3.5 测试仿真结果 3.6 板级调试与验证之顶层文件设计 四&am…

Python:界面开发,wx入门篇

以下内容为本人的学习笔记,如需要转载,请声明原文链接 微信公众号「ENG八戒」https://mp.weixin.qq.com/s/3Yb_YAKiMte_f5HanetXiA 本文大概 3617 个字,阅读需花 10 分钟 内容不多,但也花了一些精力 如要交流,欢迎评…

@Scheduled定时任务现状与改进

项目场景: 定时任务现状:每个项目都会有一些配置信息,这些信息我们是都放在一个配置服务中,这个服务会定时从配置表中加载所有配置存入本地JVM内存,以供调用方获取(调用方集成了配置服务的SDK,…

elasticsearch的查询方式和数据库事务隔离级别的思考

项目中用到了 elasticsearch,发现有几种查询方式不太一样,思考了一下,总结如下 普通分页 等同于关系数据库的分页查询,例如 mysql 的 limit,如下 sql select * from test limit 100000,10 这种查询方式有一个问题&a…

K8S学习指南(62)-K8S源代码走读之Kube-Scheduler

文章目录 前言Kube-Scheduler 的代码结构Kube-Scheduler 的核心逻辑1. 调度框架1.1 阶段划分1.2 阶段执行 2. 调度算法2.1 优先级函数2.2 优选函数 3. 调度器插件3.1 预选插件3.2 优选插件3.3 绑定插件 4. 节点选择4.1 候选节点选择4.2 节点权重计算 5. 调度事件处理5.1 调度事…

系列十一、(一)Sentinel简介

一、Sentinel简介 1.1、官网 【英文文档】 https://github.com/alibaba/Sentinel/wiki【中文文档】 https://github.com/alibaba/Sentinel/wiki/%E4%B8%BB%E9%A1%B5 1.2、概述 1.3、功能

网络路由跟踪工具

随着企业网络需求的增长,组织发现监控和管理其网络基础设施变得越来越困难。网络管理员正在转向其他工具和资源,这些工具和资源可以使他们的工作更轻松一些,尤其是在故障排除方面。 目前,网络管理员主要使用简单、免费提供的实用…

Jvm垃圾收集器系列之G1的小知识(个人见解仅供参考)

问:G1收集器有哪些主要特点? 答:G1收集器的主要特点包括:面向服务器、高吞吐量、满足GC停顿时间要求、将Java堆划分为多个大小相等的独立区域(Region)、保留了年轻代和老年代的概念但不再是物理隔阂、对大对…

在win10上cuda12+tensorrt8.6+vs2019环境下编译paddle2.6生成python包与c++推理库

paddle infer官方目前没有发布基于cuda12的c库,为此参考https://www.paddlepaddle.org.cn/inference/user_guides/source_compile.html实现cuda12的编译安装,不料博主才边缘好自己的paddle2.6,paddle官方已经发布了cuda12.0的paddle2.6框架。…

C++ 学习系列 -- using关键字

一 概述 c 11 中新引入了关键字 using 二 using 关键字的用处 1. using namespace 与 using namespace member #include<vector> #include<list>int main() {using namespace std;vector<int> vec {1, 2, 3};using std::list;list<int> li {1,…

C++使用openssl的EVP对文件进行AES-256-CBC加解密

1、背景 有项目需求&#xff0c;有对文件进行加密的功能&#xff0c;经过评估&#xff0c;最终决定使用AES-256-CBC加密。在C中要实现这种加密有很多中方式和第三方库&#xff0c;由于运行环境的限制&#xff0c;可选择的库不多&#xff0c;最终决定使用openssl来进行。 关于AE…

基于多反应堆的高并发服务器【C/C++/Reactor】(中)Buffer的创建和销毁、扩容、写入数据

TcpConnection:封装的就是建立连接之后得到的用于通信的文件描述符&#xff0c;然后基于这个文件描述符&#xff0c;在发送数据的时候&#xff0c;需要把数据先写入到一块内存里边&#xff0c;然后再把这块内存里边的数据发送给客户端&#xff0c;除了发送数据&#xff0c;剩下…

Jvm垃圾收集器系列之CMS收集器(个人见解仅供参考)

问&#xff1a;什么是CMS收集器&#xff1f; 答&#xff1a;CMS&#xff08;Concurrent Mark Sweep&#xff09;收集器是Java HotSpot虚拟机中的一种垃圾收集器&#xff0c;主要用于实现低延迟的垃圾回收。 问&#xff1a;CMS收集器的主要目标是什么&#xff1f; 答&#xff1a…

基于综合特征的细菌噬菌体宿主预测工具iPHoP (Integrated Phage HOst Prediction)的介绍以及使用方法详细流程

介绍 iPHoP&#xff08;Integrated Phage HOst Prediction&#xff09;是一种基于综合特征的细菌噬菌体宿主预测方法。它是通过整合基因组序列、蛋白质序列和宿主基因组信息来预测细菌噬菌体的宿主范围。 iPHoP的预测过程分为三个步骤&#xff1a;特征提取、特征选择和宿主预…

Ubuntu22.04无法启动EasyConnect的问题

转自&#xff1a;https://juejin.cn/post/7121236352032571422 无法启动主要是因为依赖包版本高&#xff0c;不兼容&#xff0c;要降级 解决方法&#xff1a; 1、安装easyconnect&#xff08;已安装就跳过&#xff09; 2、EasyConnect的安装位置在 /usr/share/sangfor/EasyCon…

【Spring实战】21 Spring Data REST 常用功能详细介绍

文章目录 1. 资源导出&#xff08;Resource Exporting&#xff09;2. 查询方法&#xff08;Query Methods&#xff09;3. 分页和排序&#xff08;Pagination and Sorting&#xff09;4. 关联关系&#xff08;Associations&#xff09;5. 事件&#xff08;Events&#xff09;6. …

“华为杯”杭州电子科技大学2023新生编程大赛---树

题目链接 Problem Description 给定一棵包含 n 个节点的带边权的树&#xff0c;树是一个无环的无向联通图。定义 xordist(u,v) 为节点 u 到 v 的简单路径上所有边权值的异或和。 有 q 次询问&#xff0c;每次给出 l r x&#xff0c;求 ∑rilxordist(i,x) 的值。 Input 测试…

一篇文章学会如何在 NestJS 中使用 Redis 并基于 Redis 实现接口访问限频率

前言 在处理高频数据操作和大规模并发请求的场合&#xff0c;我们需要一种机制能够快速读取和缓存数据&#xff0c;这时 Redis 就闪亮登场了。Redis 是一个开源的内存中数据结构存储系统&#xff0c;它可以用作数据库、缓存和消息中间件。 NestJS 是一个灵活且模块化的Node.j…