问题一：1px边框问题
- 解决方案：伪类 + transform
// 当设备像素比是2的时候
@media (-webkit-min-device-pixel-ratio: 2) {
.border-1px {
position: relative;
border: none;
}
.border-1px::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 200%;
height: 200%;
/* 设置相应边框 */
border-bottom: 1px solid #ccc;
transform-origin: 0 0;
transform: scale(0.5);
}
}
// 当设备像素比是3的时候
@media (-webkit-min-device-pixel-ratio: 3) {
.border-1px::after {
width: 300%;
height: 300%;
transform: scale(0.3333);
}
}
问题二：click点击事件300ms延迟
- 1.移动端 click 事件 300ms 延迟的原因是因为double-tap to zoom 双击缩放导致的。
- 2.解决方案：
2.1.不使用 click 事件，把 click 事件中要处理的放到 touchstart 或 touchend 中去处理
2.2.禁止双击缩放：https://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay
2.2.1.viewport 中禁止缩放：<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1,maximum-scale=1, user-scalable=no" />
2.2.2.touch-action: manipulation;css中事件源dom中设置。
2.3.使用 Fastclick 库：主要针对老版本浏览器：https://github.com/ftlabs/fastclick；在页面中引入Fastclick 库，在js中添加下面的这段代码之后就可以用click点击事件。
if ('addEventListener' in document) {
document.addEventListener(
'DOMContentLoaded',
function () {
FastClick.attach(document.body);
},
false
);
}
