做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="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; }

 

转载于:https://www.cnblogs.com/langzi1989/p/5965806.html