移动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中需要注意哪些点”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注恰卡编程网网站,小编将为大家输出更多高质量的实用文章!
推荐阅读
-
html5中video不支持的格式是什么
html5中video不支持的格式是什么这篇“html5中vide...
-
html5会不会被淘汰
html5会不会被淘汰这篇文章主要介绍“html5会不会被淘汰”的...
-
IE开始支持HTML5的版本是什么
IE开始支持HTML5的版本是什么本篇内容主要讲解“IE开始支持H...
-
youtube html5播放失败如何解决
youtubehtml5播放失败如何解决本篇内容主要讲解“you...
-
html5 input禁止输入如何实现
html5input禁止输入如何实现这篇“html5input...
-
html5中的base怎么使用
html5中的base怎么使用这篇文章主要介绍“html5中的ba...
-
html5 date样式如何修改
html5date样式如何修改这篇“html5date样式如何...
-
html5的含义是什么
html5的含义是什么这篇文章主要介绍“html5的含义是什么”的...
-
HTML5如何实现禁止android视频另存为
HTML5如何实现禁止android视频另存为今天小编给大家分享一...
-
html5如何实现隐藏剩余显示内容
html5如何实现隐藏剩余显示内容这篇“html5如何实现隐藏剩余...