移动端适配

基础概念

先看看一张图?

尺寸和分辨率

以iphone6为例子，iphone6的尺寸是4.7英寸（一英寸=2.54cm），这个值其实并不是手机的长或者宽，而是对角线的长度，知道长宽情况下通过勾股定理计算出来

手机的分辨率则是750*1334，如果设计师根据iphone6进行设计的话，给到的设计稿也就会这个尺寸?

DP(device pixels)

设备像素，又称物理像素，可以理解为一个像素就是一个发光单位，在iphone6中这个的数量就是750*1334

DIP(device indepent pixels)

设备独立像素，又称逻辑像素或者css像素，是一种抽象出来的像素，我们平时写的width: 100px指的就是这个

DPR(device pixles ratio)

设备像素比，计算方法为DP/DIP，如果dpr为2，意味着一个css像素需要用2*2个物理像素来绘制，在js中可以通过window.devicePixelRatio来获取DPR

这个东西有什么指导性意义呢？有的，那就是图片的尺寸，简单说就是在dpr为1的设备中用1倍稿，在2的时候用2倍稿。

举个例子，iPhone6的逻辑尺寸虽然是375*667，但是如果你用这个尺寸的图片的话，由于实际1个像素对应这4(2*2)个物理像素，所以4个物理像素为了能呈现一个像素的颜色就会通过算法强行去计算，这样子出来的效果就是很模糊。但是也不是说用像素越高的图片就越好，比如整个一亿像素的图片，图片的像素数量如果比手机物理像素多，其实就会出现模糊的逆向过程，就是一个物理像素要对应多个图片像素，也是通过算法强行计算的，这个时候呈现的效果看起来不会模糊，但是会有一些色差。

对了，如果设计师给的设计稿本身就是750*1334，那其实这个尺寸其实就已经是二倍稿了，直接下载图片用即可。

当然安卓上的dpr可谓是千奇百怪小数点都有，比如2.75，这个时候可能就要做点牺牲了，比如2.几的dpr都采用2倍稿，不然整那么多尺寸的图片属实麻烦?

PPI(pixel per inch)

沿着对角线，每英寸所拥有的像素数目，比如iphone6就是Math.sqrt(Math.pow(750, 2) + Math.pow(1334, 2)) / 4.7 = 326, 一般超过300的ppi人眼就已经分辨不出像素点了，所以又称为视网膜屏幕

在打印领域不叫ppi交dpi，其实这是一个东西

视口

布局视口(layout viewport)

由于手机尺寸比较小，如果在手机显示pc网站那只能显示一部分，更长的部分得通过滑动来查看。为了能默认显示更大的区域，这个值一般比较大，常见的就是980px，如果你的pc网站长度为980px，那默认就能显示完全啦，虽然字体小到都要看不清了?

这个值可以通过document.documentElement.clientWidth来获取。

举个例子，读者们可以用手机打开这个 链接，网站是1200px的，在ios中，所以我们一开始只能看到盒子左边绿色的980px，剩下黄色的220px的就得横向拉滚动条了，虽然能将这个pc网站看的差不多了，但是字体也比较小。