移动端 细节点

*{
touch-action: none;//清除系统默认的手势事件
}

弹性布局 常用代码
display: flex;
flex-direction: column;
justify-content: center;

flex: 1;

flex-direction: column;
align-items: center;

<meta name="viewport"
content="width=device-width,
initial-scale=1.0,
user-scalable=no,
minimum-scale=1.0,
maximum-scale=1.0" />

device-width - 设备的宽度
initial-scale - 初始的缩放比例
minimum-scale - 允许用户缩放到的最小比例
maximum-scale - 允许用户缩放到的最大比例
user-scalable - 用户是否可以手动缩放

-webkit-text-size-adjust: none;
-webkit-tap-highlight-color: transparent;
-webkit-user-select:none;

点击穿透现象有三种? ?
*点击穿透问题：
点击蒙层（mask）上的关闭按钮，
蒙层消失后发现触发了按钮下面元素的click事件
蒙层关闭按钮绑定的是touch事件，
而按钮下边元素绑定的是click事件，
touch事件触发之后，蒙层消失了，300ms后这个点的click事件fire，
event的target自然就是按钮下面的元素，因为按钮跟蒙层一起消息了。? ?

*跨页面点击穿透事件：
如果按钮下面恰好是一个href属性的a标签，
那么页面就会法神跳转，因为a标签跳转默认是click事件触发，
所以原理和上面的完全相同? ?

*另一种跨页面点击穿透问题：
这次没有mask了，直接点击页内按钮跳转至新页，
然后发现新页面中对应位置元素的click事件被触发和蒙层的道理一样，
js控制页面跳转的逻辑如果是绑定在touch事件上的，
而且新页面中对应位置的元素绑定的是click事件，
而且页面在300ms内完成了跳转，三个条件同时满足，
就出现这种情况了

方案：
对于B元素本身没有默认click事件的情况（无a标签等），
应统一使用touch事件，统一代码风格，
并且由于click事件在移动端的延迟要大很多，
不利于用户体验，所以关于触摸事件应尽量使用touch相关事件。

click / tap
setTimeout mask
pointer-events：none;

标签：scale,蒙层,细节,事件,按钮,touch,移动,click
来源： https://www.cnblogs.com/justSmile2/p/11070120.html