真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

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

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

網(wǎng)站建設(shè)哪家好,找創(chuàng)新互聯(lián)公司!專注于網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、成都微信小程序、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了任丘免費(fèi)建站歡迎大家使用!

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

1、日期問題

對(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、鍵盤收起,頁面卡住,不回落

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

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

window.scrollTo(0, scroll);

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

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

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

這個(gè)問題懷疑是頁面的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)致頁面滾動(dòng)輸入框會(huì)隨著頁面滾動(dòng),并且在部分機(jī)型上,輸入框偶爾會(huì)被鍵盤遮擋,這種偶現(xiàn)的問題,很不友好

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

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

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

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


標(biāo)題名稱:h5頁面在不同ios設(shè)備上出現(xiàn)的問題有哪些
文章路徑:http://weahome.cn/article/goiohp.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220(工作日)

18980820575(7×24)

提交需求

返回頂部