移动端像素
屏幕尺寸
购买手机或者屏幕时都会有一个屏幕尺寸的参数，比如55英寸，它既不是显示器的宽高。二手屏幕对角线的长度，
屏幕像素密度（PPI）
屏幕像素密度，英文名pixels per inch，即每英寸屏幕所拥有的像素数
计算公式（分辨率为1080*1920，5英寸）：
勾股定理算出对角线的分辨：
$$
√(1920^2 + 1080^2) ≈ 2203
$$
对角线分辨率初一屏幕尺寸：
$$
2203 / 5 ≈ 440dpi
$$
设备像素（物理像素）
设备像素又称物理像素，英文名device pixels，其尺寸大小是不会变的，从显示屏从工厂出来时，物理像素点就不会变了
分辨率的一像素等于一物理像素
设备独立像素（逻辑像素）
设备独立像素又称逻辑像素，英文名Device independent pixel ，其尺寸大小是相对的。是一种物理测量单位，基于计算机控制的坐标系统和抽象像素。
其实这个也很好理解，逻辑像素嘛，不就是我们平时用的 CSS 像素么，在 Android 中交设备独立像素。所以 设备独立像素 = CSS 像素。
例如：在开发者工具当中，选择移动端显示设备旁边的 xxx X xxx就是设备独立像素
设备像素比（device pixels ratio）
是设备上物理像素和设备独立像素的比例
设备像素比，简称DPR，DPR= 设备像素 / 设备独立像素
alert(window.devicePixelRatio);
alert(document.documentElement.clientWidth);
alert(document.documentElement.clientHeight);
alert(window.screen.width)
alert(window.screen.height)rem
rem是CSS3新增的相对长度单位，是指相对于根元素html的font-size计算值的大小。简单可理解为屏幕宽度的百分比。
比如：html{ font-size: 10px }
那么2rem === 20px,3rem === 30px
px = html的字体大小 * rem
默认浏览器的字体大小为16px
click300ms延迟
移动端click事件延迟300ms的原因
这要追溯至 2007 年初。苹果公司在发布首款 iPhone 前夕，遇到一个问题—— 当时的网站都是为大屏幕设备所设计的。于是苹果的工程师们做了一些约定，应对 iPhone这种小屏幕浏览桌面端站点的问题。这当中最出名的，当属双击缩放(double tap to zoom)。这也是会有上述 300 毫秒延迟的主要原因。当用户一次点击屏幕之后，浏览器并不能立刻判断用户是要进行双击缩放，还是想要进行单击操作。因此，iOS Safari 就等待 300 毫秒，以判断用户是否再次点击了屏幕。
禁用缩放：简单，但同时也使的网页无法缩放，不适用于未对移动端浏览做适配优化的网页。
更改默认视口宽度：简单，但需要浏览器支持。
指针事件和css touch-action:新属性，可能存在浏览器兼容问题，如仅为解决点击延迟问题儿引入一整套指针事件有点过了。
tap事件：能较好解决点击延迟，并且对其他移动端触摸事件也有较好支持，但存在点透问题，不知最新版是否解决。
fastclick:当前较好的专门解决点击延迟的库，脚本尺寸相对较大。
基本原理：FastClick的实现原理是在检测到
如何解决：
<meta name="viewport" content="width=device-width">：widht的值必须是device-width，虽然还是又差不多100ms左右的延迟使用
touchstart事件代替click事件，但是交互效果差使用第三方库
fastclick.js
穿透
滚动穿透
移动端开发中，在一个可滚动的页面中打开弹窗时，底部页面理论上是不可滚动的。但是当滑动弹窗时，底部页面会跟着滚动，这就是所谓的页面滚动穿透的问题。
解决方法：
阻止弹框的 touchmove 默认事件
使用
overflow:hidden
1px
产生原因：
那么为什么会产生这个问题呢？主要是跟一个东西有关，DPR(devicePixelRatio) 设备像素比，它是默认缩放为100%的情况下，设备像素和CSS像素的比值。
window.devicePixelRatio
解决方案：
