移動html5在webview中需要注意什麼

要注意的事項：1、click、mouseup等滑鼠事件會有200毫秒延遲，可使用touch事件，引用Quo.js事件；2、不相容css3的「:active」屬性，需要進行配置；3、只支援html，body的滾動，需要相容處理等等。

本教學操作環境：windows7系統、HTML5版、Dell G3電腦。

在行動裝置中，尤其觸控螢幕等智慧型手機中，內嵌的瀏覽器-webview中，要展現html頁面，因此對於html頁面的開發需要注意一些事項，大概有以下幾點：

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

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

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

處理方法有兩種：

   第一、是使用iscroll.js插件，但是該插件會自動阻止所有預設事件，因此需謹慎使用；

   第二、透過監聽DIV元素的觸摸和拖曳事件，進行模擬滾動效果，具體方法見noBarsOnTouchScreen.js

4、在webview中開發網頁，要達到類似app的效果，尤其是同一個網頁不同模組頁面的轉換，為了讓其效果更接近本地應用，這裡推薦一款插件pagetransitions.js(見附件pagetransitions.zip)。

它是透過css3的動畫去讓各個頁面進行流暢的轉換，允許在同一個網頁，透過各種動畫效果轉換。

相關推薦：《html影片教學》

以上是移動html5在webview中需要注意什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！