移动端小问题

Posted 2022-12-14 nighttiger

click事件的200~300ms延迟问题

由于移动端默认的布局视口宽度是980像素，所以网页文字非常小，为了快速让网页还原到原来的大小，Safari最新引入了双击缩放功能：用户双击手机页面的时候，浏览器会智能的缩放当前页面到原始大小。

?双击缩放的原理就是，当用户click一次之后，浏览器会经过约300ms之后检测是否再有一次click，如果有的话，就会缩放页面。否则的话就是一个click事件。

由于双击缩放功能存在，click事件触发就会有大约200~300ms的延迟。

dblclick事件失效

由于双击缩放的存在，pc端的dblclick事件也失效了。

方法一：禁止缩放（在meta标签中设置） Chorm和Firfox支持,Safari比较麻烦他还有双击缩放还有双击滚动操作

<meta name="viewport" content="user-scalable=no,initial-scale=1,maximun-scale=1"/>
页面不可缩放，这样双击缩放功能就没有意义了，此时浏览器可以禁用默认的双击缩放行为并且去掉300ms的点击延迟。

缺点：必须完全禁用缩放来达到目的，但是通常情况下，我们还是希望能通过双指来进行缩放的

方法二：更改默认的视口宽度（在meta标签中设置） Chorm和Firfox支持，Safari比较麻烦他还有双击缩放还有双击滚动操作

<meta name="viewport" content="width=device-width"/>
如果能识别出一个网站是响应式的网站，那么移动端浏览器就可以自动禁止双击缩放行为并去掉300ms的点击延迟。

设置上述的meta标签，那么浏览器就可以认为网站已经对移动端做过适配优化，就无需双击操作。

好处：没有完全禁用缩放，而是禁用浏览器默认的双击缩放行为，但用户仍然可以通过双指缩放操作来缩放页面。

方法三：css touch-action IE支持

touch-action：指定相应的元素上能够触发的用户代理（浏览器）的默认行为。

将该属性值设置为touch-action：none，那么表示在该元素上操作不会触发用户代理的任何默认行为。就无需进行300ms的延迟判断了。

方法四：FastClick 专门为解决移动端浏览器300ms点击延迟问题发开的一个轻量级的库。

原理：在检测到touchend事件的时候，会通过DOM自定义事件立即发出模拟一个click事件，并把300ms之后发出的click事件阻止掉。

 

 图片3px问题

产生原因：主要是因为图片的垂直对齐方式vertical-align引发的，默认值是baseline，默认为此值时图片下方就会多出3px。

解决方案：

1.将图片的垂直对齐方式vertical-align的值设置为bottom，就可以解决这个问题。

2.将图片display设置为block，并且指定width和height。

3.设置图片所在的容器元素和width和height与图片一样。

 

 

移动端点击穿透问题

如果某个返回按钮的位置，恰好在要返回的这个页面的带有href属性的a标签的范围内，在点击返回按钮后，页面快速切换到有a标签的页面，300ms后触发了click事件，从而触发了a标签的意外跳转，这个就是典型的点击穿透问题。罪魁祸首其实就是a标签跳转默认是click事件触发，而移动端的touch事件触发之后，依然会在300ms后触发click事件。

解决办法：
1.就是阻止触发touch事件完成后的click事件。
2.不要混用touch和click事件。显然不可能都绑定click事件，因为要解决300ms延迟问题(除了fastclick)，那么只能都绑定touch事件，这样click事件永远不会被触发。

注意：zepto并没有阻止click事件，所以使用zepto的tap事件依然会导致点击穿透问题，你需要手动添加 e.preventDefault() 来阻止click事件。