App下載

html5對于不同IOS設備不同問題總結分享!

猿友 2021-07-27 10:38:57 瀏覽數(shù) (1755)
反饋

相信很多小伙伴們應該有發(fā)現(xiàn)到不同的設備在使用的時候都不時不時出現(xiàn)一些設備兼容的問題,那么今天我們就來說說有關于:“html5對于不同IOS設備不同問題總結分享! ”這個方面的內(nèi)容。

1、日期問題

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

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

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

解決方案是,轉成 yyyy/mm/dd hh:mm:ss 這種格式就可以了

replace(/-/g, "/")

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

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

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

window.scrollTo(0, scroll);

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

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

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: 1

5、鍵盤遮擋輸入框

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

解決方案: 放棄使用fixed布局,頁面如果有滾動,也放棄absolute,如果強行要使用absolute,請參考上一條光標偏移

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

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

相信在小編今天總結分享的有關于:“html5對于不同IOS設備不同問題總結分享! ”這方面的相關內(nèi)容對大家的收獲也是不少的,當然更多的內(nèi)容我們也可以在W3Cschool中進行學習和了解!

 


0 人點贊