h5頁面在不同ios裝置上的問題總結

啦粑吧小魔仙發表於2019-02-28
H5iOS

最近在寫嵌入到小程式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 事件優於blur事件觸發

3、ios12在微信小程式的webview，鍵盤收回，頁面底部會留白

這個問題懷疑是頁面的scroll設定了auto導致的

解決方案：滾動一下頁面，請參考下面連結，程式碼有效。

網上找的解決方案

4、iphone fix 失效，導致一些機器上textarea游標偏移

解決方案： fixed改成absolute， 所有兄弟元素變成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;
  z-index: 1;
複製程式碼

5、鍵盤遮擋輸入框

輸入框如果使用了fixed固定在底部，鍵盤頂起的時候，iphone上fixed會失效，導致頁面滾動輸入框會隨著頁面滾動，並且在部分機型上，輸入框偶爾會被鍵盤遮擋，這種偶現的問題，很不友好

解決方案：

1、放棄使用fixed佈局，頁面如果有滾動，最好也放棄absolute，如果強行要使用absolute，請參考上一條游標偏移

2、使用flex佈局，並不完美，但也算一個解決辦法

利用flex佈局解決ios輸入框被鍵盤遮擋問題

當然，如果遇到以上這些問題，說明產品設計就很不合理，如果必要的話，還是要更換設計，改成input不需要被鍵盤頂起的設計，這些相容性的解決方案，也不併不能完美的解決所有機型的問題。這些問題的存在，不是我們的錯，希望遇到問題的同學，不要否定自己，多溝通，同時努力引導產品成為一個好產品。

相關文章