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

9月前作者：雨季mo浅忆分类：Toy博客阅读(38) 违法举报

这篇具有很好参考价值的文章主要介绍了项目难点：解决IOS调用起软键盘之后页面样式布局错乱问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1、背景

需求背景：

开发了一个类似问卷星的问卷系统并重构的项目，开始开发的 PC 端，其中最头疼的一点无非就是 IE 浏览器的兼容适配性问题；

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

首当其冲，也是最大的问题就是：

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

文章来源地址https://www.toymoban.com/news/detail-655096.html

到了这里，关于项目难点：解决IOS调用起软键盘之后页面样式布局错乱问题的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：

领支付宝红包赞助服务器费用

uniapp 微信小程ios端键盘弹起后导致页面无法滚动

新增页面用户可以主动添加输入文本框添加多了就会导致当前页面出现滚动条,这就导致ios端滚动页面的时候去点击输入框键盘抬起再关闭的时候去滚动页面发现页面滚动不了(偶尔出现),经过多次测试发现是键盘抬起的时候主动向上滑动 100%出现这种问题这次项目主要使用了

2024年02月05日
浏览(50)
electron项目打包之后显示空白页面以及发送http请求地址错误

electron项目在开发阶段，因为使用webpack脚手架,启用了webServer提供的http服务，所以有路由功能，当我们运行npm run electron:serve的时候，最后可以直接加载http://localhost:8080。在app里面就可以显示页面。当electron项目打包之后，成为桌面程序，这个时候就没有http服务支

2024年02月13日
浏览(36)
【项目亮点】大厂中分布式事务的最佳实践问题产生-＞难点与权衡(偏爱Saga)-＞解决方案

不断有同学问我大厂中实践分布式事务的问题,这里从分布式事务的产生 ,到强弱一致性与性能的权衡 ,再到最终落地的解决方案 ,再到实际的代码实现 ,再到我工作中实际使用SAGA模式的应用案例 ,一篇文章讲清楚. 83.7%分布式事务的产生都是因为拆分微服务导致的: 一句话概

2024年04月27日
浏览(45)
Vue3 vite build 之后不显示页面内容，只显示空白，也没有报错如何解决

我的项目在 build 之后就插入到我的主网站的 /tools/image 路径下使用的，并非主网站，所以需要配置两个地方：添加 base，意思是 build 之后的外部资源都从当前目录的相对路径获取。比如 main.js 不是 /main.js 而是 ./main.js 我不知道是什么原理哈，反正是管用，之前在没有使用

2024年02月13日
浏览(62)
解决uni小程序在IOS端input框被软键盘‘挤上去’的问题

事先声明！本人前端小白一枚，偶然遇到在ios端input框被遮挡的问题，十分苦恼，也尝试了很多解决办法但都不是很有效，最后在一位大牛的帮助下得到解决，想记录一下分享一下，如果你也遇到可以尝试一样看看！先复现问题！我这里是产生问题的环境是uni小程序并且使

2024年02月09日
浏览(49)
SpringBoot项目启动之后自动关闭解决办法

我们在新建SpringBoot项目的时候，在运行的时候，一会就自动关闭了，这个主要是我们在新建的时候没有选择好依赖包，相当于没有内置的Tomcat，我们运行的Main函数其实就是一个普通的Main函数，所以运行完毕了之后就关闭了，遇到这个问题我们应该如何解决？首先，检查我们

2024年02月04日
浏览(54)
小程序底部input输入框，键盘弹起时页面整体上移问题解决

存在问题：小程序中，当input输入框位于页面底部时，输入框聚焦后键盘弹起，页面会整体上移，将输入框所在位置定位到键盘上方（图2）解决思路：键盘弹起时，页面其他元素不动不动，底部输入框跟随键盘上弹（图3）效果图对比： 1、input设置属性 :adjust-position=“fal

2024年02月11日
浏览(53)
ios苹果app应用程序录屏开发有哪些难点和注意点？

首先，让我们简单了解一下iOS录屏的基本原理。iOS录屏是指将设备屏幕上的内容实时捕捉并保存为视频文件的过程。这在教学、演示和用户支持等场景中非常有用。iOS录屏可以通过使用ReplayKit框架来实现，该框架提供了一套API，用于捕捉屏幕上的内容并生成视频文件。那么，

2024年02月03日
浏览(44)
Android原生键盘弹起,H5页面被压缩的两种解决方案

移动H5项目中,会出现input框获得焦点键盘弹出把页面元素顶上去压缩到一起,影响页面布局. 方案一：监听页面变化,动态的展示和隐藏底部被顶上来的内容这种方法经调试还不算十分完美方案二：监听页面变化，键盘弹起时将变化之前的高度赋值给压缩后的页面这种

2024年02月16日
浏览(37)
h5逻辑_解决h5页面嵌入ios兼容性问题

安全区域如下图所示～蓝色部分为安全区域。处于安全区域内的内容不受圆角、齐刘海、小黑条的影响。若是将h5页面嵌入app中，就需要进行适配— 让h5页面展示在安全区域内。 tips: 安全区域是在ios11之后并且是iPhoneX及以上机型才有的。因此我们只需适配以上机型其余机型

2024年02月14日
浏览(75)