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

news2024/11/24 8:48:19

需求背景 :

    开发了一个问卷系统重构项目,刚开始开发的为 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.coloradmin.cn/o/878822.html

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

相关文章

嵌入式要卷成下一个Java了吗?

不会! 说不会也是有自己的原因的 前几天写了一篇 Linux 和单片机的文章 不做Linux就没前途吗? 单片机容易,门槛低,无非不就是单片机技术知识点比较少,特别是面向过程式的编程也更容易掌握。嵌入式 Linux 是多任务式的&…

Rx.NET in Action 第四章学习笔记

Part 2 核心思想 《Rx.NET in Action》这一部共分八章,涵盖了Rx 关键模块——**Observable(可观察序列)和Observer(观察者)**的全部功能,以及如何创建它们、连接它们和控制它们之间的关系。 然后,您将学习如何使用强大的 Rx 处理器构建复杂…

小程序云开发配置访问公网链接--定位到具体街道地址

以获取定位地址为例: 一、和平常用postman、talend api tester、其他测试调用工具为比对; 现有一需求,需要定位当前地址, 具体详细文档:腾讯位置服务 参数准备工作: key:是在腾讯位置服务里面注…

使用路由器更改设备IP_跨网段连接PLC

在一些设备IP已经固定,但是需要采集此设备的数据,需要用到跨网段采集 1、将路由器WAN(外网拨号口)设置为静态IP 2、设置DMZ主机,把DMZ主机地址设置成跨网段的PLC地址 DMZ主机 基本信息. DMZ (Demilitarized Zone)即俗称的非军事区&#xff0…

【Unity造轮子】制作一个简单的2d抓勾效果(类似蜘蛛侠的技能)

前言 欢迎阅读本文,本文将向您介绍如何使用Unity游戏引擎来实现一个简单而有趣的2D抓勾效果,类似于蜘蛛侠的独特能力。抓勾效果是许多动作游戏和平台游戏中的常见元素,给玩家带来了无限的想象和挑战。 不需要担心,即使您是一…

服务器扩展未生效

服务器扩容未生效 在阿里云付费扩容后,在服务器里面看未生效。 阿里云->实例与镜像->实例->选择实例->云盘->扩容进入linux服务器查看: df -h vda1扩容未生效。原40g->扩容后100g 解决方法: 1、安装growpart yum inst…

chatgpt和xmind结合起来帮你制作精美的思维导图

介绍 chatgpt和xmind结合起来帮你制作精美的思维导图。 1.输出Markdown格式 2.xmind导入.md文件

自动驾驶技术:改变交通出行的未来

自动驾驶技术,这个让人充满期待的技术,正在改变我们的交通方式,带来一种全新的出行体验。它可以让汽车、无人机等交通工具像人类驾驶一样自主行驶,通过人工智能、视觉计算、雷达、监控装置和全球定位系统协同合作,实现…

Handler详解

跟Handler有关系的,包括Thread,Looper,Handler,MessageQueue Looper: 由于Looper是android包加入的类,而Thread是java包的类,所以,想要为Thread创建一个Looper,需要在线程内部调用…

ChatGPT能代替搜索引擎吗?ChatGPT和搜索引擎有什么区别?

ChatGPT和搜索引擎是两种在信息获取和交流中常用的工具,ChatGPT是一种基于人工智能技术的聊天机器人,而搜索引擎是一种在互联网上搜索信息的工具。尽管它们都是依托互联网与信息获取和交流有关,部分功能重合,但在很多方面存在着明…

名侦探番外——Arduino“炸弹”引爆摩天大楼

名侦探番外——Arduino“炸弹”引爆摩天大楼 硬件准备1.材料准备2.模块介绍 电路设计1.硬件接线 程序设计1.设计思路2.部分程序3.功能优化 总结 好久不见,童鞋们!小编突然想到很久以前看的柯南剧场版——计时引爆摩天大楼的情景,对剧里的“炸…

TEXTure环境配置,跑通inference的demo

TEXTure 环境配置安装kaolin这个包,这里可能会遇到各种问题配置huggingface的访问令牌 运行Text Conditioned Texture Generation指令报错1报错2成功运行 查看结果查看贴图后的三维网格模型 环境配置 # 创建一个名为texture的环境 conda create -n texture python3.9 -y# 激活…

【算法——双指针】LeetCode 202 快乐数

题目描述: 思路:快慢指针 看到循环,我就想起了快慢指针的方法,从题目我们可以看出,我们需要模拟一个过程:不断用当前的数去生成下一个数,生成的规则就是将当前数的各位的平方累加; …

微信小程序(原生)搜索功能实现

一、效果图 二、代码 wxml <van-searchvalue"{{ keyword }}"shape"round"background"#000"placeholder"请输入关键词"use-action-slotbind:change"onChange"bind:search"onSearch"bind:clear"onClear&q…

Python——添加照片边框

原图&#xff1a; 添加边框后&#xff1a; 添加边框会读取照片的exif信息如时间、相机型号、品牌以及快门焦段等信息&#xff0c;将他们显示在下面的边框中。 获取当前py文件路径 import os #get path that py file located def Get_Currentpath():file_path os.path.abspa…

mysql主从复制搭建

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言MySQL复制过程分为三部&#xff1a; 一、准备工作二、配置>主库Master三、配置>从库SlaveSlave_IO_Running: YesSlave_SQL_Running: Yes 四、测试至此&am…

htmlCSS-----弹性布局案例展示

目录 前言 效果展示 ​编辑 代码 思路分析 前言 上一期我们学习了弹性布局&#xff0c;那么这一期我们用弹性布局来写一个小案例&#xff0c;下面看代码&#xff08;上一期链接html&CSS-----弹性布局_灰勒塔德的博客-CSDN博客&#xff09; 效果展示 代码 html代码&am…

BeanFactoryApplicationContext之间的关系

1**.BeanFactory与ApplicationContext之间的关系** &#xff08;1&#xff09;从继承关系上来看&#xff1a; ​ BeanFactory它是ApplicationContext 的父接口 &#xff08;2&#xff09;从功能上来看&#xff1a; ​ BeanFactory才是spring中的核心容器&#xff0c;而Appli…

使用AffNet和HardNet进行图像匹配

一、说明 我们有一个任务是找到与给定查询图像最匹配的图像。首先&#xff0c;我们在OpenCV中尝试了使用SIFT描述符和基于Flann的匹配器的经典图像匹配。结果是完全错误的。然后是词袋...最后&#xff0c;找到了AffNet和HardNet。 二、关于AffNet和HardNet 本文专门介绍如何进…

什么是浮动(float)?如何清除浮动?

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 浮动&#xff08;Float&#xff09;和清除浮动⭐ 浮动的使用⭐ 清除浮动1. 空元素法&#xff08;Empty Element Method&#xff09;2. 使用 Clearfix Hack3. 使用 Overflow ⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发…