html5對(duì)于不同IOS設(shè)備的不同問(wèn)題實(shí)例分析

這篇文章主要講解了“html5對(duì)于不同IOS設(shè)備的不同問(wèn)題實(shí)例分析”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“html5對(duì)于不同IOS設(shè)備的不同問(wèn)題實(shí)例分析”吧！

1、日期問(wèn)題

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

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

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

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

replace(/-/g, "/")

2、鍵盤收起，頁(yè)面卡住，不回落

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

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

window.scrollTo(0, scroll);

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

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

3、ios12在微信小程序的webview，鍵盤收回，頁(yè)面底部會(huì)留白

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

4、iphone fix 失效，導(dǎo)致一些機(jī)器上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固定在底部，鍵盤頂起的時(shí)候，iphone上fixed會(huì)失效，導(dǎo)致頁(yè)面滾動(dòng)輸入框會(huì)隨著頁(yè)面滾動(dòng)，并且在部分機(jī)型上，輸入框偶爾會(huì)被鍵盤遮擋，這種偶現(xiàn)的問(wèn)題，很不友好

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

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

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

感謝各位的閱讀，以上就是“html5對(duì)于不同IOS設(shè)備的不同問(wèn)題實(shí)例分析”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)html5對(duì)于不同IOS設(shè)備的不同問(wèn)題實(shí)例分析這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！