移动html5在webview中需要注意哪些点

移动html5在webview中需要注意哪些点

本篇内容介绍了“移动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的动画去让各个页面进行流畅的转换，允许在同一个网页，通过各种动画效果转换。

“移动html5在webview中需要注意哪些点”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注恰卡编程网网站，小编将为大家输出更多高质量的实用文章！