移动端一些小问题

Posted 2020-08-30 ₯₰．❉NىFunny

一.点击穿透：

原因：

1. touch事件300ms后，触发click事件；

2. 混用touch和click会导致点透问题。

解决思路：

1.不要混用touch和click；

2.阻止掉 touch之后的click。

解决方案：

1.tap后延迟350ms再隐藏mask；

2.pointer-events：mask隐藏后，给按钮下面元素添上 pointer-events: none; 样式，让click穿过去，350ms后去掉这个样式，恢复响应；

3.fastclick

4.只用click

5.只用touch

 

二.ios微信不支持position:fixed属性

解决方案：

1.先显示假的输入框，点击后出现真的；

2.用CSS布局；

 

三.retina屏1px问题

原因：

设备像素比(device pixel ratio,简称dpr) = 物理像素 / 设备独立像素；

css中的1px,也就是设备独立像素，并不等于移动设备的1px(物理像素)，这些由于不同的手机有不同的设备像素比。

解决方案：

1.通过viewport + REM的方式来兼容。

目前这种兼容方案相对比较完美，适合新项目（老项目改用REM单位成本会比较高）。淘宝M首页就是这种方案。

在devicePixelRatio = 2 时，输出viewport 

<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">

在devicePixelRatio = 3 时，输出viewport

<meta name="viewport" content="initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no">

同时设置对应viewport的rem基准值，这种方式就可以像以前一样轻松愉快的写1px了。