项目难点:解决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.hqwc.cn/news/67204.html

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

相关文章

小研究 - 微服务系统服务依赖发现技术综述(二)

微服务架构得到了广泛的部署与应用, 提升了软件系统开发的效率, 降低了系统更新与维护的成本, 提高了系统的可扩展性. 但微服务变更频繁、异构融合等特点使得微服务故障频发、其故障传播快且影响大, 同时微服务间复杂的调用依赖关系或逻辑依赖关系又使得其故障难以被及时、准确…

【果树农药喷洒机器人】Part6:基于深度相机与分割掩膜的果树冠层体积探测方法

📢:如果你也对机器人、人工智能感兴趣,看来我们志同道合✨ 📢:不妨浏览一下我的博客主页【https://blog.csdn.net/weixin_51244852】 📢:文章若有幸对你有帮助,可点赞 👍…

如何利用 EMC 模型解决能源服务提供商的瓶颈

01. 什么是合同能源管理? 合同能源管理(EMC-Energy Management Contract) 是一种新型的市场化节能机制,其实质就是以减少的能源费用来支付节能项目全部成本的节能投资方式。:节能服务公司与用能单位以契约形式约定节能项目的节能目标,节能服…

C++ 动态规划经典案例解析之最长公共子序列(LCS)_窥探递归和动态规划的一致性

1. 前言 动态规划处理字符相关案例中,求最长公共子序列以及求最短编辑距离,算是经典中的经典案例。 讲解此类问题的算法在网上一抓应用一大把,即便如此,还是忍不住有写此文的想法。毕竟理解、看懂都不算是真正掌握,唯…

小程序制作教程:从零开始搭建企业小程序

在如今的数字化时代,企业介绍小程序成为了企业展示与推广的重要工具。通过企业介绍小程序,企业可以向用户展示自己的品牌形象、产品服务以及企业文化等内容,进而提高用户对企业的认知度和信任度。本文将介绍如何从零开始搭建一个企业介绍小程…

基于 Nginx All In One 的 Outline Wiki 部署方法

1. Outline 简介 官网:https://www.getoutline.com/ Outline 是一个开源的知识库和团队协作工具🧠,旨在帮助团队共享、组织和协作文档📝。它提供了一个简洁的界面,使用户能够轻松创建、编辑和查看文档。 以下是 Out…

Redis数据结构——Redis简单动态字符串SDS

定义 众所周知,Redis是由C语言写的。 对于字符串类型的数据存储,Redis并没有直接使用C语言中的字符串。 而是自己构建了一个结构体,叫做“简单动态字符串”,简称SDS,比C语言中的字符串更加灵活。 SDS的结构体是这样的…

【Sklearn】基于最中心分类器算法的数据分类预测(Excel可直接替换数据)

【Sklearn】基于最中心分类器算法的数据分类预测(Excel可直接替换数据) 1.模型原理2.模型参数3.文件结构4.Excel数据5.下载地址6.完整代码7.运行结果 1.模型原理 最近中心分类器(Nearest Centroid Classifier)也被称为近似最近邻…

遍历集合List的五种方法以及如何在遍历集合过程中安全移除元素

一、遍历集合List的五种方法 测试数据 List<String> list new ArrayList<>(); list.add("A");list.add("B");list.add("C");1. 普通for循环 普通for循环&#xff0c;通过索引遍历 for (int i 0; i < list.size(); i) {Syst…

Java【数据结构】二分查找

&#x1f31e; 题目&#xff1a; &#x1f30f;在有序数组A中&#xff0c;查找目标值target &#x1f30f;如果找到返回索引 &#x1f30f;如果找不到返回-1 算法描述解释前提给定一个内含n个元素的有序数组A&#xff0c;满足A0<A1<A2<<An-1,一个待查值target1设…

Springboot MultipartFile文件上传与下载

yml文件配置是否可以上传及上传附件大小 servlet:multipart:# 允许文件上传enabled: true# 单个文件大小max-file-size: 20MB# 设置总上传的文件大小max-request-size: 50MB /*** param files* param request* Description 上传文件* Throws* Return java.util.List* Date 202…

设计模式

本文主要介绍设计模式的主要设计原则和常用设计模式。 一、UML画图 1.类图 2.时序图 二、设计模式原则 1.单一职责原则 就是一个方法、一个类只做一件事&#xff1b; 2.开闭原则 就是软件的设计应该对拓展开放&#xff0c;对修改关闭&#xff0c;这在java中体现最明显的就…