小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
本文已参与「掘力星计划」，赢取创作大礼包，挑战创作激励金。
移动端的适配
在写移动端的代码, 页面大多不是太复杂, 但是适配问题总觉的是一个比较难一点的难点.下面学习一些具体的概念:
物理像素
以 iphone6 为例，可知道：
分辨率：
1334pt x 750pt
指的是屏幕上垂直有 1334 个物理像素，水平有 750 个物理像素。
屏幕尺寸：4.7in
注意英寸是长度单位，不是面积单位。4.7 英寸指的是屏幕对角线的长度，1 英寸等于 2.54cm。
屏幕像素密度：326ppi
指的是每英寸屏幕所拥有的像素数，在显示器中，dpi=ppi。dpi 强调的是每英寸多少点。同时，屏幕像素密度=分辨率/屏幕尺寸
接着，我们来看一下其他的单位。
设备独立像素：
设备独立像素，不同于设备像素（物理像素），它是虚拟化的。比如说 css 像素，我们常说的 10px 其实指的就是它。需要注意的是，物理像素开发者是 无法获取的，它是自然存在的一种东西，该是多少就是多少。
设备像素比：
缩写简称 dpr，也就是我们经常在谷歌控制台移动端调试顶端会看到的一个值。
设备像素比 = 设备像素 / css 像素（垂直方向或水平方向）。可以通过 JS 来获取：window.devicePixelRatio
浏览器厂商为了让用户在小屏幕下网页也能够显示地很好，所以把布局视口宽度设置地很大，一般在 768px ~ 1024px 之间，最常见的宽度是 980px。这个宽度可以通过 document.documentElement.clientWidth 得到。
<meta name="viewport" content="width=device-width,initial-scale=1" />
width=device-width 这句代码可以把布局视口设置成为浏览器（屏幕）的宽度。
initial-scale=1 的意思是初始缩放的比例是 1，使用它的时候，同时也会将布局视口的尺寸设置为缩放后的尺寸。而缩放的尺寸就是基于屏幕的宽度来的，也就起到了和 width=device-width 同样的效果。
另外，值得一提的是，我们在进行媒体查询的时候，查询的宽度值其实也是布局视口的宽度值。
