目录：

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

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

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

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

1.点透场景

层A覆盖在层B上面，常见的有对话框等，层A用touchstart或者tap(zepto)事件点击进行隐藏或者移开，由于click晚于touchstart，超过300ms，当层A隐藏后，

click到的是下面的层B，此时层B的click事件会触发，或者其上的a链接会跳转，input，select会吊起键盘。

zepto的tap事件原理

zepto的tap事件是通过touchstart,touchend(android 4.0.x不支持touchend，通过touchmove 设置定时器触发touched)模拟出来的，

事件是绑定在document上，大体思路是在touchstart的时候向对象附加点击的x,y；（其中还包含很多细节，比如设置最后点击时间，设置长按定时器等);

touchmove的过程动态的计算手势在view上的偏移点，最后touchend 根据偏移点确定是否是点击，如果是点击动态的构建一个event然后根据

设置的状态获取是单机、双击。

非zepto的tap事件未必会出现点透问题。

2.解决方法

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

1.touchFix{visibility: hidden;width: 100%;height: 100%;position: absolute;left: 0px;top: 0px;z-index: 9999;}

2> touchstart换成touchend，因为触发touchend需要200ms所以可以把触发时间这个原理问题解决掉

$("#cbFinish").on("touchend",function (e) {
　　e.preventDefault();
});

3> zepto最新版已经修复了这个问题，或者使用fastclick、hammer等通用库

4> 直接用click，不考虑延迟

5> 下层避开click事件，如a链接改为span等标签，使用js跳转页面

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

问题：

由于分辨率 DPI 的差异，高清手机屏上的 1px 实际上是由 2×2 个像素点来渲染，有的屏幕甚至用到了 3×3 个像素点所以在实际的代码实现中，设置1px的边框，会渲染成2px.

解决：
1、可以用缩小放大transform中的scale来实现：

.border-bottom{
    position: relative;
    border-top: none !important;
}

.border-bottom::after {
    content: " ";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: #e4e4e4;
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
}

然后通过媒体查询

/* 2倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 2.0) {
    .border-bottom::after {
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
    }
}

/* 3倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 3.0) {
    .border-bottom::after {
        -webkit-transform: scaleY(0.33);
        transform: scaleY(0.33);
    }
}

2、第二种的方法很简单，就用一像素的图片来替代。

.border-image-1px {
    border-width: 1px 0px;
    -webkit-border-image: url("##") 2 0 stretch;
}

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

附代码：https://blog.csdn.net/qq_32963841/article/details/78632261

Vue 页面加载数据之前增加 loading 动画

附代码：https://www.jianshu.com/p/104bbb01b222