h5頁面在不同ios設(shè)備上出現(xiàn)的問題有哪些

這篇文章將為大家詳細(xì)講解有關(guān)h5頁面在不同ios設(shè)備上出現(xiàn)的問題有哪些，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

最近在寫嵌入到小程序webview的一個h6頁面，是一個文章評論的功能，這個過程中，遇到很多兼容性的問題，在不同機型上的表現(xiàn)也很不一致，所以總結(jié)了以下這些問題，記錄下來，以便以后查看

1、日期問題

對于yyyy-mm-dd hh:mm:ss 這種格式在ios系統(tǒng)不識別

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

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

解決方案是，轉(zhuǎn)成 yyyy/mm/dd hh:mm:ss 這種格式就可以了

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

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

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

這種問題，在網(wǎng)上查了很多解決方案，大致是在blur事件中，讓頁面滾動一下

window.scrollTo(0, scroll);

但是有一個很嚴(yán)重的問題：如果頁面上有按鈕需要操作 ，例如，評論的輸入框+發(fā)布按鈕，輸入完文字，點擊“發(fā)布”，觸發(fā)click事件的時候，會導(dǎo)致頁面先觸發(fā)blur事件，鍵盤回落，然后一切就結(jié)束了。。。。按鈕點擊沒有起任何作用。

解決方案： 把click事件更換成ontouchstart 可以解決這個問題。 ontouchstart 事件優(yōu)于click事件觸發(fā)

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

這個問題懷疑是頁面的scroll設(shè)置了auto導(dǎo)致的

4、iphone fix 失效，導(dǎo)致一些機器上textarea光標(biāo)偏移

解決方案： 所有兄弟元素變成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: 1

5、鍵盤遮擋輸入框

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

解決方案： 放棄使用fixed布局，頁面如果有滾動，也放棄absolute，如果強行要使用absolute，請參考上一條光標(biāo)偏移

建議使用flex布局，兼容性會得到解決。

當(dāng)然，如果遇到以上這些問題，說明產(chǎn)品設(shè)計就很不合理，如果必要的話，還是要更換設(shè)計，改成input不需要被鍵盤頂起的設(shè)計，這些兼容性的解決方案，也不并不能完美的解決所有機型的問題。

關(guān)于“h5頁面在不同ios設(shè)備上出現(xiàn)的問題有哪些”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。