最近在寫嵌入到小程式webview的一個h5頁面,是一個文章評論的功能,這個過程中,遇到很多兼容性的問題,在不同機型上的表現也很不一致,所以總結了以下這些問題,記錄下來,以便日後查看
1、日期問題對於yyyy-mm-dd hh:mm:ss 這種格式在ios系統不識別
時間格式化的時候,在瀏覽器端處理好好的,到了手機端,就變成NAN,或者null,這種情況,是ios系統不能轉換這種類型的時間。
let date = new Date('2019-02-28 18:33:24'); // null`
解決方案是,轉換成yyyy/mm/dd hh:mm:ss 這種格式就可以了
replace(//-/g, /)2.鍵盤收起,頁面卡住,不回落
ios12上,發現鍵盤收起的時候,頁面會卡主,留下底部一片空白,稍微動一下頁面,就會恢復。
這種問題,在網路上查了很多解決方案,大致是在blur事件中,讓頁面滾動一下
window.scrollTo(0, scroll);
但有一個很嚴重的問題:如果頁面上有按鈕需要操作,例如,評論的輸入框+發布按鈕,輸入完文字,點擊發布,觸發click事件的時候,會導致頁面先觸發blur事件,鍵盤回落,然後一切就結束了。 。 。 。按鈕點擊沒有起任何作用。
解決方案: 把click事件換成ontouchstart 可以解決這個問題。 ontouchstart 事件優於click事件觸發
3.ios12在微信小程式的webview,鍵盤收回,頁面底部會留白這個問題懷疑是頁面的scroll設定了auto導致的
4.iphone fix 失效,導致一些機器上textarea遊標偏移解決方案: 所有兄弟元素變成absolute, 父元素overflow:auto;
父元素:height: 100vh; position: relative; overflow: auto; 兄弟元素:position: absolute; top: 0; bottom: 0; left: 0; right: 0; overflow-x: visible; overflow-y: auto; padding-bottom: 10px; z-index: 15.鍵盤遮擋輸入框
輸入框如果使用了fixed固定在底部,鍵盤頂起的時候,iphone上fixed會失效,導致頁面滾動輸入框會隨著頁面滾動,並且在部分機型上,輸入框偶爾會被鍵盤遮擋,這種偶現的問題,很不友善
解: 放棄使用fixed佈局,頁面如果有捲動,也放棄absolute,如果強行要使用absolute,請參考上一條遊標偏移
建議使用flex佈局,相容性會得到解決。
當然,如果遇到以上這些問題,表示產品設計就很不合理,如果必要的話,還是要更換設計,改成input不需要被鍵盤頂起的設計,這些兼容性的解決方案,也不並不能完美的解決所有機型的問題。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持VeVb武林網。