移动前端开发之viewport的深入理解 --- 待续

在移动设备上进行网页的重构或开发，

只有明白了viewport的概念

才能 响应 各种  不同分辨率 的移动设备

一、viewport的概念

通俗的讲，移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，

在具体一点，就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域，

但viewport又不局限于浏览器可视区域(设备)的大小，它可能比屏幕要大，也可能屏幕要小

在默认情况下，一般来讲，移动设备上的viewport都是要大于浏览器可视区域的

这是因为考虑到移动设备 屏幕  相对于桌面电脑来说都比较小，

所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站，

移动设备上的浏览器都会把自己默认的viewport设为980px或1024px（也可能是其它值，这个是由设备自己决定的），

但带来的后果就是浏览器会出现横向滚动条，因为浏览器可视区域的宽度是比这个默认的viewport的宽度要小的。

二、css中的1px并不等于设备的1px

在css中我们一般使用px作为单位，在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像素，

这可能会造成我们的一个错觉，那就是css中的像素就是设备的物理像素。

但实际情况却并非如此，css中的像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同的。

在早先的移动设备中，屏幕像素密度都比较低，如iphone3，它的分辨率为320x480，

在iphone3上，一个css像素确实是等于一个屏幕物理像素的。

后来随着技术的发展，移动设备的屏幕像素密度越来越高

从iphone4开始，苹果公司便推出了所谓的Retina屏，分辨率提高了一倍，变成640x960，

但屏幕尺寸却没变化，这就意味着同样大小的屏幕上，像素却多了一倍，

这时，一个css像素实际包含了两个物理像素的。

例如，在Retina屏的iphone上，devicePixelRatio的值为2，也就是说1个css像素相当于2个物理像素。

但是要注意的是，devicePixelRatio在不同的浏览器中还存在些许的兼容性问题，所以我们现在还并不能完全信赖这个东西，具体的情况可以看下这篇文章。