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

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

1、背景

需求背景：

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

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

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

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

2、解决过程

然后反正就是各种百度，各种请教大佬：

JSBridge ：支付宝H5开放文档

百度的方案：

解决 H5 IOS input 聚焦时，页面整个被推上去了，键盘收起页面未下移 BUG

IOS下软键盘收起的时候，页面被顶上去，无法复原的终极解决方案

uniapp 开发项目 ：

记一次h5页面ios唤起软键盘踩坑 - 掘金

UniApp中input组件在IOS设备上弹出软键盘时页面整体上移问题的解决方案，以及input组件聚焦后弹出软键盘固定在软键盘上方，失去聚焦后回到原始位置。_ios弹出键盘界面上移

上面千奇百怪的方式都尝试过了，最后还是没啥卵用：

3、解决方案

最终在请教了公司内的大佬之后，就基本 OK 啦～

vant解决ios弹出键盘导致页面fixed布局错乱的问题,前端,Vue,CSS,前端,IOS

-webkit-backface-visibility_笔记大全_设计学院

结合 ➕ ： -webkit-transform: translate3d(0,0,0)

在 App.vue 内全局配置了一下完事！

（当然这里最好判断一下是否为 IOS 系统再添加属性，因为可能会影响到安卓系统的哟～）

vant解决ios弹出键盘导致页面fixed布局错乱的问题,前端,Vue,CSS,前端,IOS

4、最终代码

<script>
export default {
	mounted() {
		// 判断是否为IOS系统以添加CSS属性
		let u = navigator.userAgent;
		let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); // ios终端
		if (isIOS) {
			let iosApp = document.getElementById('app');
			iosApp.style.backfaceVisibility = 'hidden';
			iosApp.style.transform = 'translate3d(0,0,0)';
		}
	},
};
</script>

Perfect ！！下课～文章来源地址https://www.toymoban.com/news/detail-763846.html

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