HTML5与APP混合开发遇到的问题有哪些

我们在进行HTML5与APP混合开发的时候难免会遇到这样或者是那样的问题,今天小编就带大家看一下扣丁学堂HTML5在线学习视频教程讲解的关于HTML5与APP混合开发遇到的问题及解决方法,对HTML5感兴趣的小伙伴可以往下看。

HTML5与APP混合开发遇到的问题有哪些

HTML5学习

问题1:页面滚动条问题

问题描述:

web页面在PC浏览器上浏览时有滚动条;但是,在移动端浏览器打开时,没有滚动条

解决方法:

将页面的最外层(我一般在写页面时,会在body标签内写一个大容器,用于存放页面的内容)设置overflow:auto/scroll;并且不能设置height属性的值(height:100%也不行)

例子:

<body>

<divstyle="overflow:scroll/auto;">

//网页内容

</div>

</body>

问题2:touchstart和touchend事件的使用

问题描述:

引入touch.js文件,使用touchstart和touchend事件实现交互效果时,在部分手机出现事件触发失效的问题[例如:低版本的荣耀手机]

解决方法:

方法1:"removeEventListener"和"addEventListener"一起使用

方法2:添加e.preventDefault();阻止部分手机默认跳转

法3:Jquery的on实现事件绑定

说明:法1与法2都是原生JS使用addEventListener实现事件监听;并且dom元素使用touchstart和touchend事件时,需要结合事件绑定或者事件监听一起使用,否则js部分会抛出异常

代码:

//法一:

document.getElementById('list5').addEventListener('touchstart',callback,false);

document.getElementById('list5').removeEventListener('touchstart',callback,false);

document.getElementById('list5').addEventListener('touchend',callback,false);

document.getElementById('list5').removeEventListener('touchend',callback,false);

//法二:

document.getElementById('list5').addEventListener('touchstart',function(e){

e.preventDefault();

},false);

document.getElementById('list5').addEventListener('touchend',function(e){

e.preventDefault();

},false);

问题3:长按闪退的问题

情景还原:

有一个XXX列表页,长按列表页的列表项时(触摸到文字),在低版本手机中会出现闪退的情况

解决方法:

js部分:在事件触发时添加e.preventDefault();,用于阻止默认行为

css部分:添加禁止文本文本复制的代码

代码:

//js部分:

e.preventDefault();

//css部分:

-webkit-touch-callout:none;//解决闪退

//禁止复制

-moz-user-select:none;

-khtml-user-select:none;

user-select:none;

以上就是扣丁学堂HTML5在线学习视频教程中关于HTML5与APP混合开发遇到的问题及解决方法,由于文章篇幅问题就先给大家说这么多,想要了解更多内容的小伙伴可以登录扣丁学堂官网查询。扣丁学堂是专业的HTML5培训机构,不仅有专业的老师和与时俱进的课程体系,还有大量的HTML5在线视频供学员观看学习哦。

相关推荐