完整的移动端开发笔记请戳https://github.com/zenglinan/Mobile-note
目录：
- 基础知识
- 高清屏幕部分图片失真的原因
1. 基础知识
设备像素（物理像素 / 像素分辨率）
- 显示器的最小物理单位（对于一个显示器来说是固定的）
- 以手机屏幕为例，iphonex像素分辨率为1125x2436，是指屏幕横向能显示1125个物理像素点，纵向能显示2436个物理像素点。
- 通常说的4K显示屏指的是 4096x2160。
设备独立像素（dips）
- 比如我们偶尔会说“电脑屏幕在 2560x1600分辨率下不适合玩游戏，我们把它调为 1440x900”，这里的“分辨率”（非严谨说法）指的就是设备独立像素。
- 可在控制台通过 window.screen.width/ window.screen.height 查看。
- 另外，平时我们所说的 iphoneX的逻辑分辨率375 x 812指的就是设备独立像素。chrome检查元素模拟调试手机设备时显示如375x667和 320x480都是设备独立像素。
- 一个设备独立像素可能包含多个物理像素，包含的越多，显示越清晰
PPI
- 指每英寸的物理像素数。
- 以尺寸为5.8英寸（屏幕对角线长度）、分辨率为1125x2436的iphonex为例：
ppi = Math.sqrt(11251125 + 24362436) / 5.8 ，值为 463ppi。（屏幕对角线上的像素点 / 对角线的英寸数）
CSS像素
- 在页面不缩放的情况下，1px的CSS像素 === 1设备独立像素
- 页面放大200%时，页面的设备独立像素依旧不变，放大的是CSS像素。但是此时CSS像素与设备独立像素的关系变化了，1px === 4独立像素（宽x2，高x2）
devicePixelRatio
- window.devicePixelRatio可查看
- devicePixelRatio指的是物理像素和设备独立像素的比，即1独立像素由多少物理像素渲染。
- window.devicePixelRatio = 物理像素 / 设备独立像素（dips）。经计算， iphonex的 devicePixelRatio 是3。
屏幕的尺寸
window.screen.width
// 指设备独立像素值
浏览器窗口尺寸
// 指的是CSS像素
window.innerWidth
window.innerHeight
注：innerWidth innerHeight不包括滚动条的宽度高度
精确计量用document.documentElement.clientWidth和document.documentElement.clientHeight
viewport的概念
默认情况下：
body宽度 === html元素宽度 === 窗口尺寸
html总宽高（大部分情况下可能超出视口宽高）
document.documentElement.offsetWidth
2. 高清屏部分图片失真的原因
一些像素比较低的图片，在普通显示屏上可以显示，但在高清屏上会出现模糊的现象
原因是：假如有一张图片，设置宽高为100px，在不同屏幕上，呈现的都是100px设备独立像素的图片，但对于高清屏来说，100px独立像素所需的物理像素比普通屏多得多
（1px独立像素所含的物理像素越多，屏幕越高清）
假如普通屏100px独立像素需要1W个像素点，高清屏得3W个<r>
但是图片本身包含的像素点可能远远达不到3W，这时候，图片就会拉伸自己的像素点，所以看起来就显得模糊了。
解决办法是：高清屏上图片的宽高设小一点，这样所需的物理像素就不用那么多了，屏幕显示图片所需的物理像素越接近图片，图片越高清
矢量图永不失真
因为矢量图形不是一个个像素点显色的，而是通过给定的坐标数据进行绘制的，所以不会失真。
