需求背景 :
? ? 開發了一個問卷系統重構項目,剛開始開發的為?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 ! !下課~