目录:
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