h5頁面在不一樣ios設備上的問題總結

一、日期問題

對於yyyy-mm-dd hh:mm:ss 這種格式在ios系統不識別

時間格式化的時候，在瀏覽器端處理好好的，到了手機端，就變成NAN，或者null，這種狀況，是ios系統不能轉化這種類型的時間。

1. `let date = new Date('2019-02-28 18:33:24'); // null`

解決方案是，轉成 yyyy/mm/dd hh:mm:ss 這種格式就能夠了

1. replace(/\-/g, "/")

二、鍵盤收起，頁面卡住，不回落

ios12上，發現鍵盤收起的時候，頁面會卡主，留下底部一片空白，稍微動一下頁面，就會恢復。

這種問題，在網上查了不少解決方案，大體是在blur事件中，讓頁面滾動一下

1. window.scrollTo(0, scroll);

可是有一個很嚴重的問題：若是頁面上有按鈕須要操做 ，例如，評論的輸入框+發佈按鈕，輸入完文字，點擊「發佈」，觸發click事件的時候，會致使頁面先觸發blur事件，鍵盤迴落，而後一切就結束了。。。。按鈕點擊沒有起任何做用。

解決方案： 把click事件更換成ontouchstart 能夠解決這個問題。 ontouchstart 事件優於click事件觸發

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

這個問題懷疑是頁面的scroll設置了auto致使的

解決方案：滾動一下頁面，請參考連接，代碼有效。 https://blog.csdn.net/qq_23370345/article/details/84757505

四、iphone fix 失效，致使一些機器上textarea光標偏移

解決方案： 全部兄弟元素變成absolute， 父元素overflow:auto;

1. 父元素：

2. height: 100vh;

3. position: relative;

4. overflow: auto;

5.  

6. 兄弟元素：

7. position: absolute;

8. top: 0;

9. bottom: 0;

10. left: 0;

11. right: 0;

12. overflow-x: visible;

13. overflow-y: auto;

14. padding-bottom: 10px;

15. z-index: 1;

五、鍵盤遮擋輸入框

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

解決方案： 放棄使用fixed佈局，頁面若是有滾動，也放棄absolute，若是強行要使用absolute，請參考上一條光標偏移

建議使用flex佈局，兼容性會獲得解決。

固然，若是遇到以上這些問題，說明產品設計就很不合理，若是必要的話，仍是要更換設計，改爲input不須要被鍵盤頂起的設計，這些兼容性的解決方案，也不併不能完美的解決全部機型的問題。