项目难点:解决IOS调用起软键盘之后页面样式布局错乱问题

需求背景 :

    开发了一个问卷系统重构项目,刚开始开发的为 PC 端,其中最头疼的一点无非就是 IE 浏览器的兼容适配性问题;

    再之后项目经理要求开发移动端,简单的说就是写 H5 页面,到时候会内嵌在 App 应用或办公系统、小程序里,刚开始在 Edge 浏览器模拟器里面进行的开发,因为自己也是头一次开发移动端的项目,没啥经验(就是尽量避免使用 fixed 定位,IOS会有兼容性问题),所以项目内还是有好多地方都使用了 fixed 的固定定位,因此也就导致了,项目开发完使用 Jenkins 打包部署上线,在IOS苹果真机测试时,遇到了各式各样的奇葩问题。。

    首当其冲,也是最大的问题就是 :

        1、当 input 输入框聚焦调用起软键盘输入完内容之后,也就是软键盘收起来后,整个页面布局排版样式啥的都乱了,而且当你想再次选中输入框时,发现选不中了,其实是此时整个页面都已经掉下来一块了,再想选中聚焦的话,就要往上面点击一下才行。。


然后反正就是各种百度,各种请教 :

JSBridge : 支付宝H5开放文档


百度的 :

解决 H5 IOS input 聚焦时,页面整个被推上去了,键盘收起页面未下移 BUG_h5输入法 页面固定不移动_粤小七的博客-CSDN博客

IOS下软键盘收起的时候,页面被顶上去,无法复原的终极解决方案 - 简书

uniapp 开发项目

记一次h5页面ios唤起软键盘踩坑 - 掘金

UniApp中input组件在IOS设备上弹出软键盘时页面整体上移问题的解决方案,以及input组件聚焦后弹出软键盘固定在软键盘上方,失去聚焦后回到原始位置。_ios弹出键盘界面上移_番茄Salad的博客-CSDN博客


上面的千奇百怪的方式都试过了,还是没啥卵用 :

最终再请教了公司内的大佬之后,OK 啦 ~

-webkit-backface-visibility_笔记大全_设计学院 

结合 : -webkit-transform:translate3d(0,0,0)

在 App.vue 内全局配置了一下完事 !

Perfect ! !

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

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

相关文章

[数据分析与可视化] Python绘制数据地图5-MovingPandas绘图实例

MovingPandas是一个基于Python和GeoPandas的开源地理时空数据处理库,用于处理移动物体的轨迹数据。关于MovingPandas的使用见文章:MovingPandas入门指北,本文主要介绍三个MovingPandas的绘图实例。 MovingPandas官方仓库地址为:mo…

Vue使用jspdf和html2canvas组件库结合导出PDF文件

效果图: 1、安装依赖: npm install html2canvas --save npm install jspdf --save 或 yarn add html2canvas --save yarn add jspdf --save 2、封装全局调用方法:this.$exportPDF(#id,文件名) 新建js文件:/utils/html2Pdf.js&am…

java spring cloud 企业工程管理系统源码+二次开发+定制化服务 em

Java版工程项目管理系统 Spring CloudSpring BootMybatisVueElementUI前后端分离 功能清单如下: 首页 工作台:待办工作、消息通知、预警信息,点击可进入相应的列表 项目进度图表:选择(总体或单个)项目显…

释放马氏距离的力量:用 Python 探索多元数据分析

一、说明 马哈拉诺比斯距离(Mahalanobis Distance)是一种测量两个概率分布之间距离的方法。它是基于样本协方差矩阵的函数,用于评估两个向量之间的相似程度。Mahalanobis Distance考虑了数据集中各个特征之间的协方差,因此比欧氏距…

判断自己网络所在的NAT类型

文章目录 各NAT类型介绍软件准备流程 各NAT类型介绍 NAT0: OpenInternet,没有经过NAT地址转换,公网IP NAT1: Full Cone NAT,动态家宽可以达到最优的状态,外网设备可以主动发信息给NAT1网络内的设备。 NAT2: Address-Restricted C…

uniapp 自定义手机顶部状态栏不生效问题

想要的效果想淘宝一样,底色覆盖到手机顶部,找了两天都没找到原因,过程很艰苦,直接上结果吧 项目是后来接手的,最终原因出在这, "immersed" : false>设置为 true 就可以了,沉浸式样…

Spring(三):Spring中Bean的生命周期和作用域

前言 在 Spring 中,那些组成应用程序的主体及由 Spring IOC 容器所管理的对象,被称之为 bean。简单地讲,bean 就是由 IOC 容器初始化、装配及管理的对象,除此之外,bean 就与应用程序中的其他对象没有什么区别了。而 b…

了解IL汇编跳转语句

il代码, .assembly extern mscorlib {}.assembly Test{.ver 1:0:1:0}.module test.exe.method static void main() cil managed{.maxstack 5.entrypointldstr "Enter First Number"call void [mscorlib]System.Console::WriteLine (string)call string …

【图像分类】理论篇(2)经典卷积神经网络 Lenet~Densenet

1、卷积运算 在二维卷积运算中,卷积窗口从输入张量的左上角开始,从左到右、从上到下滑动。 当卷积窗口滑动到新一个位置时,包含在该窗口中的部分张量与卷积核张量进行按元素相乘,得到的张量再求和得到一个单一的标量值&#xff0c…

vue+flask基于知识图谱的抑郁症问答系统

vueflask基于知识图谱的抑郁症问答系统 抑郁症已经成为当今社会刻不容缓需要解决的问题,抑郁症的危害主要有以下几种:1.可导致病人情绪低落:抑郁症的病人长期处于悲观的状态中,感觉不到快乐,总是高兴不起来。2.可导致工…

【软件测试】我的2023面试经验谈

最近行业里有个苦涩的笑话:公司扛过了之前的三年,没扛过摘下最近的一年,真是让人想笑又笑不出来。年前听说政策的变化,大家都满怀希望觉得年后行情一片大好,工作岗位激增,至少能有更多的机会拥抱未来。然而…

warning: remember to run ‘libtool --finish /usr/local/1/php-7.4.29/libs

ubuntu上php7.4.33编译安装完成后警告报错,如下所示 # /usr/local/apache2/apr/build-1/libtool --finish /usr/local/soft/php-7.4.33/libs # vim /etc/ld.so.conf.d/local.conf /usr/local/lib /usr/lib64 # ldconfig 或者安装依赖服务,重新编译 #…

vivo手机录屏在哪里?我来告诉你!(2023最新)

“有人知道vivo手机录屏在哪里吗?刚买了最新款的vivo手机,就是找不到录屏功能在哪,刚好最近需要录屏,很烦躁,有人会吗,求求啦” 随着智能手机的普及,录屏功能逐渐成为用户喜爱的功能之一。vivo…

北航基于openEuler构建工业机器人操作系统,打造“开箱即用”的机器人基础软件平台

北京航空航天大学是国家“双一流”建设高校,以建设扎根中国大地的世界一流大学为发展目标。北京航空航天大学在机器人领域一直处于行业前沿,以其亮眼的成果和优秀的师资力量,成为国内机器人领域的重要参与者和建设者。机器人操作系统是机器人…

“深入解析Maven:安装、创建项目和依赖管理的完全指南“

目录 引言Maven的安装创建Maven项目之前的装备工作Eclipse创建新的Maven项目项目依赖管理 总结 引言 Maven是一个流行的项目管理工具,被广泛用于Java项目的构建、依赖管理和部署。它提供了一种简单而强大的方式来管理项目的各个方面,使开发人员能够更专…

深度学习与计算机相结合:直播实时美颜SDK的创新之路

时下,实时美颜技术就成为了直播主们的得力工具,它可以在直播过程中即时处理视频画面。而支持实时美颜功能的SDK更是推动了这项技术的发展,让直播主和普通用户都能轻松使用美颜功能。 一、美颜技术的演进 早期的美颜技术主要依赖于简单的图…

java Spring Boot yml多环境拆分文件管理优化

上文 java Spring Boot yml多环境配置 我们讲了多环境开发 但这种东西都放在一起 还是非常容易暴露信息的 并且对维护来讲 也不是非常的友好 这里 我们在resources下创建三个文件 分别叫 application-pro.yml application-dev.yml application-test.yml 我们直接将三个环境 转…

2023全球创见者大会|企企通总架构师杨华:基于SRM的电子发票解决方案, 破局企业开票困局

01、2023全球创见者大会 2023年8月8日,金蝶30周年庆典&2023全球创见者大会在深圳国际会展中心隆重举行。现场吸引了4000与会来宾齐聚一堂,超过100位演讲嘉宾组成豪华阵容,举办16场行业峰会,呈现了一场数字化领域备受瞩目…

Redis之删除策略

文章目录 前言一、过期数据二、数据删除策略2.1定时删除2.2惰性删除2.3 定期删除2.4 删除策略比对 三、逐出算法3.1影响数据逐出的相关配置 总结 前言 Redis的常用删除策略 一、过期数据 Redis是一种内存级数据库,所有数据均存放在内存中,内存中的数据可…

【云原生】Docker 详解(三):Docker 镜像管理基础

Docker 详解(三):Docker 镜像管理基础 1.镜像的概念 镜像可以理解为应用程序的集装箱,而 Docker 用来装卸集装箱。 Docker 镜像含有启动容器所需要的文件系统及其内容,因此,其用于创建并启动容器。 Dock…