web前端常见面试题（十二）

目录：

1，请详解移动端点透，为什么会发生点透？描述发生的场景及解决方案（越多越好）

2，移动端为什么会有一像素问题？如何解决？

3，你还知不知道其他移动端的常见问题？

一：请详解移动端点透，为什么会发生点透？描述发生的场景及解决方案

提到移动端点透问题，就不得不先提到移动端的click事件300ms延迟问题

一、移动端click事件300ms延迟问题

在移动端执行click事件时，通常移动端的浏览器会延迟300ms来触发对应的事件，这个问题的原因是：为了判断用户是否是双击，因为在移动端浏览器刚开始的时候，为了提升用户体验感，开发了双击缩放和双击滚动等默认行为，在之前的web开发中，体验并不明显，在当前运行速度和用户体验至上的时代，这个问题表现的特别严重。

移动端click事件300ms延迟解决方案

1，添加meta标签,阻止用户双击缩放，并限制视口宽度

2，设置CSStouch-action

CSS属性 touch-action 用于指定某个给定的区域是否允许用户操作，以及如何响应用户操作（比如浏览器自带的划动、缩放等）。

*：移动端点透问题

点透问题出现的场景

当A/B两个层上下z轴重叠，上层的A点击后消失或移开（这一点很重要），并且B元素本身有默认click事件（如a标签）或绑定了click事件。在这种情况下，点击A/B重叠的部分，就会出现点透的现象。

总结如下：

A/B两个层上下z轴重叠（上下重叠，A盖着B）。

上层的A点击后消失或移开。（这一点很重要）

B元素本身有默认click事件（如a标签） 或 B绑定了click事件。

点透问题的出现原因

点透问题出现的原因就是因为我们上边说过的移动端click事件300ms延迟问题，当点击上层元素时，先触发touchstart事件，然后在300ms后会触发click事件，而此时上层元素已经消失，所以下边的元素会触发click事件，这就是点透

点透问题的解决方案

fastclick.js

fastclick.js既然可以解决click300ms延迟，那必然可以解决点透问题，使用方法如上文所述。

对于B元素本身存在默认click事件的情况，使用touchend代替touchstart事件并阻止掉时A元素touchend的默认行为preventDefault()，因为触发touchend需要200ms，从而阻止click事件的产生。

使用一个(透明)遮罩层，屏蔽所有事件，然后400ms(对于IOS来说是个理想值)后自动隐藏

延迟一定的时间(300ms+)来处理事件

---

移动端为什么会有一像素问题？如何解决？为什么会有一像素问题？

因为在移动端，由于屏幕分辨率的不同，现在分为一倍屏、二倍屏、三倍屏。在不同的分辨率上，有可能一像素被渲然成二个像素点或者三个像素点，所以在实际写代码的时候，我们写的 border: 1px solid #000; 可能实际被渲然为 2px/3px；

一像素问题的解决方案

1，先使用伪类元素实现边框效果，然后通过媒体查询来操控transform: scale来适配不同分辨率

2，使用border-image来代替border

3，使用viewport +rem