首页 > 代码库 > 做webApp遇到的一些坑及解决方案

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

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="http://www.mamicode.com/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遇到的一些坑及解决方案