1、背景?

需求背景 ：

? ? 開(kāi)發(fā)了一個(gè)類似問(wèn)卷星的問(wèn)卷系統(tǒng)并重構(gòu)的項(xiàng)目，剛開(kāi)始開(kāi)發(fā)的為?PC 端，其中最頭疼的一點(diǎn)無(wú)非就是 IE 瀏覽器的兼容適配性問(wèn)題；

? ? 再之后項(xiàng)目經(jīng)理要求同步進(jìn)行開(kāi)發(fā)?移動(dòng)端?，簡(jiǎn)單的說(shuō)就是寫(xiě) H5 頁(yè)面，到時(shí)候會(huì)內(nèi)嵌在 App 應(yīng)用、辦公系統(tǒng) 或 小程序 里，剛開(kāi)始都是在 Edge 瀏覽器?模擬器?里面進(jìn)行的開(kāi)發(fā)測(cè)試，因?yàn)樽约阂彩穷^一次開(kāi)發(fā)移動(dòng)端的項(xiàng)目，所以沒(méi)啥經(jīng)驗(yàn)（ 后來(lái)知道了就是要盡量避免使用 fixed 定位，因?yàn)?IOS 會(huì)有兼容性問(wèn)題），但是沒(méi)辦法，項(xiàng)目?jī)?nèi)已經(jīng)有好多地方都使用了 fixed 的 固定定位，因此也就導(dǎo)致了，項(xiàng)目開(kāi)發(fā)完使用 Jenkins 打包部署上線后，在 IOS 系統(tǒng)的蘋(píng)果真機(jī)上面測(cè)試時(shí)，就遇到了各式各樣的奇葩問(wèn)題。。

---

? ? 首當(dāng)其沖，也是最大的問(wèn)題就是 ：

? ? ? ? 1、當(dāng) input 輸入框聚焦調(diào)用起?軟鍵盤(pán)?輸入完內(nèi)容之后，也就是軟鍵盤(pán)收起來(lái)后，整個(gè)頁(yè)面布局排版樣式啥的都亂了，而且當(dāng)你想再次選中輸入框時(shí)，發(fā)現(xiàn)選不中了，其實(shí)是此時(shí)整個(gè)頁(yè)面都已經(jīng)掉下來(lái)一塊了，再想選中聚焦的話，就要往上面點(diǎn)擊一下才行。。

---

2、解決過(guò)程

然后反正就是各種百度，各種請(qǐng)教大佬 ：

JSBridge ：?支付寶H5開(kāi)放文檔

---

百度的方案? ：

解決 H5 IOS input 聚焦時(shí)，頁(yè)面整個(gè)被推上去了，鍵盤(pán)收起頁(yè)面未下移 BUG

IOS下軟鍵盤(pán)收起的時(shí)候，頁(yè)面被頂上去，無(wú)法復(fù)原的終極解決方案

uniapp 開(kāi)發(fā)項(xiàng)目 ：

記一次h5頁(yè)面ios喚起軟鍵盤(pán)踩坑 - 掘金

UniApp中input組件在IOS設(shè)備上彈出軟鍵盤(pán)時(shí)頁(yè)面整體上移問(wèn)題的解決方案，以及input組件聚焦后彈出軟鍵盤(pán)固定在軟鍵盤(pán)上方，失去聚焦后回到原始位置。_ios彈出鍵盤(pán)界面上移

上面千奇百怪的方式都嘗試過(guò)了，最后還是沒(méi)啥卵用 ：

3、解決方案

最終在請(qǐng)教了公司內(nèi)的大佬之后，就基本?OK 啦 ～

-webkit-backface-visibility_筆記大全_設(shè)計(jì)學(xué)院

結(jié)合 ? ：?-webkit-transform: translate3d(0,0,0)?

在 App.vue 內(nèi)全局配置了一下完事 ！

（ 當(dāng)然這里最好判斷一下是否為 IOS 系統(tǒng)再添加屬性，因?yàn)榭赡軙?huì)影響到安卓系統(tǒng)的喲～?）

4、最終代碼

<script>
export default {
	mounted() {
		// 判斷是否為IOS系統(tǒng)以添加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 ！ ！下課 ～文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-763846.html

到了這里，關(guān)于項(xiàng)目難點(diǎn)：解決IOS調(diào)起軟鍵盤(pán)之后頁(yè)面樣式布局錯(cuò)亂問(wèn)題的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！