一些移动端知识

[amenzai]

调试

Chrome Devtools 调试

chrome 浏览器，F12，使用手机模式。

真机调试

略。

适配

设备像素 & CSS像素 & 设备独立像素

• 设备像素：物理像素，不可变。
• CSS像素：web编程用到的，我们在JS和CSS中使用的10px就是CSS像素，是可变的。CSS像素受屏幕缩放和设备像素比（dpr）的影响。如我们网页的中的字体在网页放大之后会变大，还有在移动端看起来会比PC端小一些。
• 设备独立像素：device independent pixel，dip，与设备无关的像素。

设备像素比

• 在JS中我们可以通过window.devicePixelRatio来得到当前设备的dpr
• 在CSS中我们可以通过-webkit-device-pixel-ratio来进行媒体查询

注意，当我们放大或者缩小屏幕的时候，window.devicePixelRatio是可变的

layout viewport

在IOS中layout viewport默认大小980px，在android中layout viewport为800px，很明显这两个值都大于我们浏览器的可视区域宽度。我们可以通过document.documentElement.clientWidth来获取layout viewport的宽度

visual viewport

有了layout viewport，我们还需要一个viewport来表示我们浏览器可视区域的大小，这个就是visual viewport。visual viewport的宽度可以通过window.innerWidth获取。

ideal viewport

这个viewport就叫做ideal viewport。但是不同的设备的ideal viewport不一样，有320px，有360px的，还有384px的......

• window.innerWidth指的是浏览器窗口的宽度（包含滚动条），用CSS像素衡量。
• document.documentElement.clientWidth指的是viewport的宽度，等于浏览器窗口的宽度（不包含滚动条）。
• document.documentElement.offsetWidth指的是html的宽度，默认为浏览器窗口的宽度。
• document.documentElement.offsetHeight指的是html的高度，没有显示给html指定高度的话，为0。

vw & vh & vmin & vmax

• vm：1vw 等于视口宽度的 1%
• 1vh 等于视口高度的 1%
• vmin：选取 vw 和 vh 中最小的那个
• vmax：选取 vw 和 vh 中最大的那个

移动端 touch 事件

• touchstart
• touchmove
• touchend
• touchcancel

避免 300ms 延迟：

• meta 标签
• tap 组件（FastClick, react-tap）

点击穿透：

• touch -> click
• touch 事件的 target 消失，触发底部 click

解决：不要混用 touch 和 click