项目难点:解决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 ! !下课~

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

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

相关文章

multiple definition of......first defined here

一、背景 环境: 银河麒麟–ARM–GCC7.4.0 写了一个动态库,依赖opencv和freeImage等第三方库,用cmake进行编译。原本在centos6-x86-gcc7.5.0上面进行编译非常的顺利,但是拿到麒麟arm上面编译就提示了这个错误:这个报错…

Ruby软件外包开发语言特点

Ruby 是一种动态、开放源代码的编程语言,它注重简洁性和开发人员的幸福感。在许多方面都具有优点,但由于其动态类型和解释执行的特性,它可能不适合某些对性能和类型安全性要求较高的场景。下面和大家分享 Ruby 语言的一些主要特点以及适用的场…

【C语言】动态通讯录 -- 详解

⚪前言 前面详细介绍了静态版通讯录【C语言】静态通讯录 -- 详解_炫酷的伊莉娜的博客-CSDN博客,但是静态版通讯录的空间是无法被改变的,而且空间利用率也不高。为了解决静态通讯录这一缺点,这时就要有一个能够随着存入联系人数量的增加而增大…

Ansys Zemax | 手机镜头设计 - 第 1 部分:光学设计

本文是 3 篇系列文章的一部分,该系列文章将讨论智能手机镜头模组设计的挑战,从概念、设计到制造和结构变形的分析。本文是三部分系列的第一部分,将专注于OpticStudio中镜头模组的设计、分析和可制造性评估。(联系我们获取文章附件…

安防监控视频云存储平台EasyNVR通道频繁离线的原因排查与解决

安防视频监控汇聚EasyNVR视频集中存储平台,是基于RTSP/Onvif协议的安防视频平台,可支持将接入的视频流进行全平台、全终端分发,分发的视频流包括RTSP、RTMP、HTTP-FLV、WS-FLV、HLS、WebRTC等格式。为了满足用户的集成与二次开发需求&#xf…

企业计算机服务器遭到了locked勒索病毒攻击如何解决,勒索病毒解密

网络技术的不断发展,也为网络安全埋下了隐患,近期,我们收到很多企业的求助,企业的计算机服务器遭到了locked勒索病毒的攻击,导致企业的财务系统内的所有数据被加密无法读取,严重影响了企业的正常运行。最近…

如何通过观测云的RUM找到前端加载的瓶颈--可观测性入门篇

声明与保证 本文写作于2023年6月,性能优化的评价标准和优化方式仅适用于当前观测云控制台,当然随着产品迭代及技术更新,本文也会应要求适当更新。 创建、修订时间创建修改人版本2023/6/24观测云***v1.0.0 1.网站性能评价的发展史&#xff…

打开vim的语法高亮

在一个Ubuntu中自带的vim版本是8.2.4919,默认就是开始了语法高亮的,打开一个Java文件效果如下: 它不仅仅对Java文件有语法高亮,对很多的文件都有,比如vim的配置文件也有语法高亮,有语法高亮时读起来会容易…

DNNGP模型解读-early stopping 和 batch normalization的使用

一、考虑的因素(仅代表个人观点) 1.首先我们看到他的这篇文章所考虑的不同方面从而做出的不同改进,首先考虑到了对于基因组预测的深度学习方法的设计 ,我们设计出来这个方法就是为了基因组预测而使用,这也是主要目的&…

排序算法-冒泡排序(C语言实现)

简介😀 冒泡排序是一种简单但效率较低的排序算法。它重复地扫描待排序元素列表,比较相邻的两个元素,并将顺序错误的元素交换位置,直到整个列表排序完成。 实现🧐 以下内容为本人原创,经过自己整理得出&am…

WAVE SUMMIT2023六大分会场同步开启,飞桨+文心大模型加速区域产业智能化!

由深度学习技术及应用国家工程研究中心主办、百度飞桨和文心大模型承办的WAVE SUMMIT深度学习开发者大会2023将于8月16日重磅来袭!届时上海、广州、深圳、成都、南昌和宁波六大分会场将同步开启! 分会汇聚区域产业大咖、科研机构专家、知名学者和技术大…

【C++ 学习 ⑬】- 详解 list 容器

目录 一、list 容器的基本介绍 二、list 容器的成员函数 2.1 - 迭代器 2.2 - 修改操作 三、list 的模拟实现 3.1 - list.h 3.2 - 详解 list 容器的迭代器 3.2 - test.cpp 一、list 容器的基本介绍 list 容器以类模板 list<T>&#xff08;T 为存储元素的类型&…

【第二阶段】kotlin函数引用

针对上篇传入函数参数我们也可以重新定义一个函数&#xff0c;然后在main中调用时传入函数对象 lambda属于函数类型的对象&#xff0c;需要把普通函数变成函数类型的对象&#xff08;函数引用&#xff09;&#xff0c;使用“&#xff1a;&#xff1a;” /*** You can edit, ru…

DRF 缓存

应用环境 django4.2.3 &#xff0c;python3.10 由于对于服务而言&#xff0c;有些数据查询起来比较费时&#xff0c;所以&#xff0c;对于有些数据&#xff0c;我们需要将其缓存。 最近做了一个服务&#xff0c;用的时 DRF 的架构&#xff0c;刚好涉及缓存&#xff0c;特此记…

webSocket 笔记

1 认识webSocket WebSocket_ohana&#xff01;的博客-CSDN博客 一&#xff0c;什么是websocket WebSocket是HTML5下一种新的协议&#xff08;websocket协议本质上是一个基于tcp的协议&#xff09;它实现了浏览器与服务器全双工通信&#xff0c;能更好的节省服务器资源和带宽…

centos 7.9 部署django项目

1、部署框架 主要组件&#xff1a;nginx、uwsgi、django项目 访问页面流程&#xff1a;nginx---》uwsgi---》django---》uwsgi---》nginx 2、部署过程 操作系统&#xff1a;centos 7.9 配置信息&#xff1a;4核4G 50G 内网 eip &#xff1a;10.241.103.216 部署过程&…

深入学习SpringCloud Alibaba微服务架构,揭秘Nacos、Sentinel、Seata等核心技术,助力构建高效系统!

课程链接&#xff1a; 链接: https://pan.baidu.com/s/1hRN0R8VFcwjyCTWCEsz-8Q?pwdj6ej 提取码: j6ej 复制这段内容后打开百度网盘手机App&#xff0c;操作更方便哦 --来自百度网盘超级会员v4的分享 课程介绍&#xff1a; &#x1f4da;【第01阶段】课程简介&#xff1a;全…

Android FrameWork 层 Handler源码解析

Handler生产者-消费者模型 在android开发中&#xff0c;经常会在子线程中进行一些耗时操作&#xff0c;当操作完毕后会通过handler发送一些数据给主线程&#xff0c;通知主线程做相应的操作。 其中&#xff1a;子线程、handler、主线程&#xff0c;其实构成了线程模型中经典的…

STM32存储左右互搏 I2C总线FATS读写EEPROM ZD24C1MA

STM32存储左右互搏 I2C总线FATS读写EEPROM ZD24C1MA 在较低容量存储领域&#xff0c;EEPROM是常用的存储介质&#xff0c;可以通过直接或者文件操作方式进行读写。不同容量的EEPROM的地址对应位数不同&#xff0c;在发送字节的格式上有所区别。EEPROM是非快速访问存储&#xf…

vue2+Spring Boot2.7 大文件分片上传

之前我们文章 手把手带大家实现 vue2Spring Boot2.7 文件上传功能 将了上传文件 但如果文件很大 就不太好处理了 按正常情况甚至因为超量而报错 这里 我弄了个足够大的文件 我们先搭建 Spring Boot2.7 环境 首先 application.yml 代码编写如下 server:port: 80 upload:path:…