首页 > 移动平台 > 详细

做webApp遇到的一些坑及解决方案

时间:2016-10-16 07:40:32      阅读:172      评论:0      收藏:0      [点我收藏+]

1.问题:手机端click事件会有大约300ms的延迟

原因:手机端事件touchstart-->touchmove-->touchend or touchcancel-->click,因为在touch事件触发之后,浏览器要判断用户是否会做出双击屏幕的操作,所以会等待300ms来判断,再做出是否触发click事件的处理,所以就会有300ms的延迟

解决方法:使用touch事件来代替click事件,如zepto.js的tap事件和fastClick来解决。

2.问题:在部分机型下(如小米4、小米2s、中兴)body设置的font-size是用rem单位的话,若其他元素没有设置font-size,该font-size值继承与body,则会很高概率出现字体异常变大的情况。

原因:估计是跟app的webview默认设置有关,body的font-size使用rem单位,就是相当于当前根节点的font-size来确定的,可能在某些webview的设置下,body用的是webview设置的默认字体大小,因为在我给html设置了一个px单位的默认font-size时,还是会出现字体异常变大的情况,具体webview的一些细节就没有研究。

解决方法:body设置一个px单位的默认font-size值,不用rem,或者给字体会异常变大的元素设定一个px单位的font-size值。

3.问题:使用zepto的 tap 事件时会出现“点透”bug,比如:一个元素A绑定了tap事件,紧跟其后的元素B绑定了click事件,A触发tap事件时将自己remove掉,B就会自动“掉”到A的位置,接下来就是不正常的情况,因为这个时候B的click事件也触发了。

原因:因为tap事件是通过 touchstart 、touchmove 、 touchend 这三个事件来模拟实现的,在手机端事件机制中,触发touch事件后会紧接着触发touch事件坐标元素的click事件,因为B元素在300ms内刚好“掉”回来A的位置,所以就触发了B的click事件,还有zepto的tap事件都是代理到body的,所以想通过e.preventDefault()阻止默认行为也是不可行的

解决方法:(1)A元素换成click事件;(2)使用我写的库 mTouch 来给A绑定tap事件,然后在事件回调中通过e.preventDefault()来阻止默认行为,或者换用其他的支持tap事件的库

4.问题: ios自动识别数字为手机号码,导致部分设置好的样式无效(字体颜色等)

原因: ios自动识别数字后会给数字加上 <a href="tel:数字">数字</a> 标签,所以数字的部分样式继承了a标签的样式,导致部分样式无效

解决方法:(1)meta 标签加上 <meta name="format-detection" content="telephone=no" /> 阻止默认识别数字为电话;(2)设置样式的时候 css 选择器把a标签选上,如:

 
<span class="number">123<span> 
// 原来样式
.number {
color: #f00;
} 
// 修改后样式
.number, .number a {
color: #f00;
}

 

做webApp遇到的一些坑及解决方案

原文:http://www.cnblogs.com/langzi1989/p/5965806.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!