本篇內(nèi)容介紹了“移動(dòng)html5在webview中需要注意哪些點(diǎn)”的有關(guān)知識(shí),在實(shí)際案例的操作過(guò)程中,不少人都會(huì)遇到這樣的困境,接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧!希望大家仔細(xì)閱讀,能夠?qū)W有所成!
目前成都創(chuàng)新互聯(lián)公司已為近1000家的企業(yè)提供了網(wǎng)站建設(shè)、域名、虛擬主機(jī)、成都網(wǎng)站托管、企業(yè)網(wǎng)站設(shè)計(jì)、徐聞網(wǎng)站維護(hù)等服務(wù),公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略,正道將秉承"和諧、參與、激情"的文化,與客戶和合作伙伴齊心協(xié)力一起成長(zhǎng),共同發(fā)展。
需要注意的事項(xiàng):1、click、mouseup等鼠標(biāo)事件會(huì)有200毫秒延遲,可使用touch事件,引用Quo.js事件;2、不兼容css3的“:active”屬性,需要進(jìn)行配置;3、只支持html,body的滾動(dòng),需要進(jìn)行兼容處理等等。
本教程操作環(huán)境:windows7系統(tǒng)、HTML5版、Dell G3電腦。
在移動(dòng)設(shè)備中,尤其觸摸屏等智能手機(jī)中,內(nèi)嵌的瀏覽器-webview中,要展現(xiàn)html頁(yè)面,因此對(duì)于html頁(yè)面的開發(fā)需要注意一些事項(xiàng),大概有以下幾點(diǎn):
1、在webview中,對(duì)于click,mouseup,mousedown等鼠標(biāo)事件會(huì)有200毫秒延遲,建議使用touch事件,方便的話請(qǐng)引用Quo.js事件(大小為3KB),滿足快速點(diǎn)擊效果;
2、webview中不兼容css3的:active屬性,需要對(duì)touchstart、touchend事件添加class為active,增加.active在css中
3、目前android中的webview只支持html,body的滾動(dòng),對(duì)于其他div等元素,即便是使用overflow:scroll也無(wú)法讓div可以滾動(dòng),因此需要對(duì)此進(jìn)行兼容處理。
處理方法有兩種:
第一、是使用iscroll.js插件,但是該插件會(huì)自動(dòng)阻止所有默認(rèn)事件,因此需謹(jǐn)慎使用;
第二、通過(guò)監(jiān)聽DIV元素的觸摸和拖動(dòng)事件,進(jìn)行模擬滾動(dòng)效果,具體方法見noBarsOnTouchScreen.js
4、在webview中開發(fā)網(wǎng)頁(yè),要達(dá)到類似app的效果,尤其是同一個(gè)網(wǎng)頁(yè)不同模塊頁(yè)面的轉(zhuǎn)換,為了讓其效果更加接近本地應(yīng)用,這里推薦一款插件pagetransitions.js(見附件pagetransitions.zip)。
它是通過(guò)css3的動(dòng)畫去讓各個(gè)頁(yè)面進(jìn)行流暢的轉(zhuǎn)換,允許在同一個(gè)網(wǎng)頁(yè),通過(guò)各種動(dòng)畫效果轉(zhuǎn)換。
“移動(dòng)html5在webview中需要注意哪些點(diǎn)”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站,小編將為大家輸出更多高質(zhì)量的實(shí)用文章!