首页 > 代码库 > 做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遇到的一些坑及解决方案