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

需求背景 :

开发了一个问卷系统重构项目,刚开始开发的为 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 ! !下课~

相关推荐
梨想橙汁4 分钟前
Vue3 组件开发:生命周期钩子,组件之间通信全方案
前端·vue.js
雪芽蓝域zzs5 分钟前
分页组件 + el-config-provider 中文国际化 + 靠右布局
前端·javascript·vue.js
恋猫de小郭9 分钟前
iPhone Duo 适配详解,需要改变的不止是布局模型
前端·flutter·ios
萧行之20 分钟前
Observable Plot 源码深度解析——4 核心抽象逐项学习
前端·学习·数据可视化
今日无bug37 分钟前
为什么大模型回答总是一个字一个字蹦出来?聊聊 SSE 流式输出与 BFF 层的那些事
前端·llm
CIO_Alliance40 分钟前
AI微调系列(1)| 全量微调、LoRA、QLoRA 三种方案怎么选
前端·人工智能·神经网络·机器学习·embedding·企业ai转型
hanbo17C242 分钟前
企业官网能不能看出公司实力?选建站公司前,先看这6条硬标准
运维·服务器·前端
zzzll11111 小时前
LLM 学习第 24 课:Agent Harness
前端·人工智能·学习
Bmob后端云1 小时前
Bmob后端云实战|Python实现SSE流式输出,给备忘录AI加上打字机效果
前端·github
nunumaymax1 小时前
【第九章-React Router 6】
前端·react.js