移動html5在webview中需要注意哪些點(diǎn)

本篇內(nèi)容介紹了“移動html5在webview中需要注意哪些點(diǎn)”的有關(guān)知識，在實(shí)際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

需要注意的事項：1、click、mouseup等鼠標(biāo)事件會有200毫秒延遲，可使用touch事件，引用Quo.js事件；2、不兼容css3的“:active”屬性，需要進(jìn)行配置；3、只支持html，body的滾動，需要進(jìn)行兼容處理等等。

本教程操作環(huán)境：windows7系統(tǒng)、HTML5版、Dell G3電腦。

在移動設(shè)備中，尤其觸摸屏等智能手機(jī)中，內(nèi)嵌的瀏覽器-webview中，要展現(xiàn)html頁面，因此對于html頁面的開發(fā)需要注意一些事項，大概有以下幾點(diǎn)：

1、在webview中，對于click,mouseup,mousedown等鼠標(biāo)事件會有200毫秒延遲，建議使用touch事件，方便的話請引用Quo.js事件(大小為3KB)，滿足快速點(diǎn)擊效果；

2、webview中不兼容css3的:active屬性，需要對touchstart、touchend事件添加class為active，增加.active在css中

3、目前android中的webview只支持html，body的滾動，對于其他div等元素，即便是使用overflow：scroll也無法讓div可以滾動，因此需要對此進(jìn)行兼容處理。

處理方法有兩種：

第一、是使用iscroll.js插件，但是該插件會自動阻止所有默認(rèn)事件，因此需謹(jǐn)慎使用；

第二、通過監(jiān)聽DIV元素的觸摸和拖動事件，進(jìn)行模擬滾動效果，具體方法見noBarsOnTouchScreen.js

4、在webview中開發(fā)網(wǎng)頁，要達(dá)到類似app的效果，尤其是同一個網(wǎng)頁不同模塊頁面的轉(zhuǎn)換，為了讓其效果更加接近本地應(yīng)用，這里推薦一款插件pagetransitions.js(見附件pagetransitions.zip)。

它是通過css3的動畫去讓各個頁面進(jìn)行流暢的轉(zhuǎn)換，允許在同一個網(wǎng)頁，通過各種動畫效果轉(zhuǎn)換。

“移動html5在webview中需要注意哪些點(diǎn)”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！