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

news/2025/2/14 4:25:57/

需求背景 :

    开发了一个问卷系统重构项目,刚开始开发的为 PC 端,其中最头疼的一点无非就是

IE 浏览器的兼容适配性问题;

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

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

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


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

JSBridge : 支付宝H5开放文档


百度的 :

解决 H5 IOS input 聚焦时,页面整个被推上去了,键盘收起页面未下移 BUG

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

uniapp 开发项目

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

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


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

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

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

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

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

( 当然这里最好判断一下是否为 IOS 系统再添加属性,因为可能会影响到安卓系统的哟~ )

Perfect ! !下课~


http://www.ppmy.cn/news/1037302.html

相关文章

【ES6】—let 声明方式

一、不属于顶层对象window let 关键字声明的变量,不会挂载到window的属性 var a 5 console.log(a) console.log(window.a) // 5 // 5 // 变量a 被挂载到window属性上了 , a window.alet b 6 console.log(b) console.log(window.b) // 6 // undefin…

PHP 公交公司充电桩管理系统mysql数据库web结构apache计算机软件工程网页wamp

一、源码特点 PHP 公交公司充电桩管理系统是一套完善的web设计系统,对理解php编程开发语言有帮助,系统具有完整的源代码和数据库,系统主要采用B/S模式开发。 源码下载 https://download.csdn.net/download/qq_41221322/88220946 论文下…

系统学习Linux-Mariadb高可用MHA

概念 MHA(MasterHigh Availability)是一套优秀的MySQL高可用环境下故障切换和主从复制的软件。 MHA 的出现就是解决MySQL 单点的问题。 MySQL故障切换过程中,MHA能做到0-30秒内自动完成故障切换操作。 MHA能在故障切换的过程中最大程度上…

hivesql-dayofweek 函数

返回日期或时间戳的星期几。 此函数是 extract(DAYOFWEEK FROM expr) 的同义函数。 语法 dayofweek(expr) 参数 expr:一个 DATE 或 TIMESTAMP 表达式。 返回 一个 INTEGER,其中 1 Sunday 和 7 Saturday。 示例 > SELECT dayofweek(2009-07-30)…

工程项目管理系统源码+功能清单+项目模块+spring cloud +spring boot em

​ 工程项目管理软件(工程项目管理系统)对建设工程项目管理组织建设、项目策划决策、规划设计、施工建设到竣工交付、总结评估、运维运营,全过程、全方位的对项目进行综合管理 工程项目各模块及其功能点清单 一、系统管理 1、数据字典&#…

Error: Couldn‘t find preset “es2015“ relative to directory

vue引入element-ui,运行时报了这个错误 Module build failed: Error: Couldnt find preset "es2015" relative to directory "D:\\360MoveData\\Users\\Administrator\\Desktop\\新建文件夹\\henge-test"at D:\360MoveData\Users\Administrato…

MySQL 索引为什么使用 B+ 树,而不使用红黑树 / B 树 ?

面试官问 :索引为什么使用 B 树,而不使用 B 树,不使用红黑树呢 首先 B 树和 B 树 都是多叉搜索树,然后我们先来观察一下 B 树和 B 树的数据结构: B 树的数据结构实现 >> B 树的数据结构实现 >> 【B 树相…

【Unity】UI的一些简单知识

Canvas 新建一个Canvas Render Mode Canvas 中有一个Render Mode(渲染模式),有三种渲染模式: Screen Space-Overlay (屏幕空间)Screen Space-Camara 、 World Space 其中,Space- Overlay是默认显示在…