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

青灯夜游
發布: 2022-01-11 16:04:59
原創
1535 人瀏覽過

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

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

本教學操作環境: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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板