前端解惑之设备独立像素，设备独立像素比，和viewport

最近一直在研究移动设备的前端开发，发现于PC大有不同。要说吗这种不同，首先就要从meta标签的viewport开始

1. 首先在传统的PC网页的前端开发当中，浏览器只不过是庞大桌面上的一个小应用，且大小可调，但是在移动端，浏览器默认是占满整个屏幕的（除了状态栏）。
2. 在传统web开发中最开始很少考虑网页自适应的问题，近些年显示器大小多变，才导致了前端开发的自适应难题，但是这于我们说的移动端的自适应还是有很大区别的。
3. 将一个PC的web页面没有任何修改的用手机打开会发生什么呢，在电脑和手机分辨率都是1920*1080的情况下，手机相当于是一个横向放置的电脑显示器，网页被等比的缩小，一些在电脑上本来很小的字，在手机端几乎看不清。

那怎么办呢，

第一直觉就是， 在移动端放大页面啊。。。。。
对，的确是这么做的，但是不是你想的那么简单

1. 首先，移动端和PC端一样有一个设备固有的分辨率，比如1920*1080
2. 但是除了这个设备像素之外，移动端还定义了一个叫做设备独立像素的东西，比如360*640.
3. 这两个东西的比值叫做设备独立像素比 比如1920/360 =3

这个东西有什么用呢，？
前面说了，这是用来放大移动端的网页的。
用上面的例子，就是你的网页被放大了3倍，这样你可以理解为现在的网页是（1920*3，1080*3），当然你也可以理解为是移动端屏幕缩小了三倍，效果一样，

那么按放大来理解，你的手机端是不是再也显示不了这么大的网页了，好，，，这个时候你的手机只能显示某一个很小的区域，这个区域就是320*640

那么这个放大操作用什么实现呢， 用的就是viewport属性， 所以在移动端网页的head中总会有一行这样的代码

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

什么意思呢，width=device-width是说将设备独立像素的宽度作为显示宽度。

要深入了解的话建议在PC端和移动端分别试试 这些js代码,你就明白了：

     alert(window.devicePixelRatio);
     alert(document.documentElement.clientWidth);
     alert(document.documentElement.clientHeight);
     alert(window.screen.width)
     alert(window.screen.height)