关于移动端viewport，物理像素，设备独立像素，设备像素比的详解

物理像素：也可称为设备像素，是设备屏幕中能显示的最小的物理元件，可以理解为屏幕中的排列的发光二极管。
设备独立像素：也可以称为CSS像素或者逻辑像素，在不同屏幕中，相同的CSS像素呈现的尺寸是一致的。
设备像素比：等于物理像素除以设备独立像素。

上图中可以看到当CSS像素相同时，在不同屏幕下的物理尺寸是一致的，但是由于他们的设备像素比不同，所以物理像素是不同的。这是因为Retina屏幕的分辨率更高，它的屏幕发光二极管排列更为密集。

在模拟京东金融项目时，以iPhone5作为设计的基准尺寸，其设备独立像素为320pt*568pt。pt是绝对单位，为point,1pt=0.376mm。设备像素比是2。那么物理像素则为(320*2)*(568*2)，即640px*1136px。所以设计稿中的尺寸为640px*1136px.也就是说，设计稿中每个元素的像素是使用物理像素。

所以移动端的步骤是：
1、得到设计稿，这里使用iphone5作为设计的基准尺寸，设计稿大小为640px*1136px
2、如果设备为Retina屏幕，那么将meta中的initial-scale设置为1/dpr=1/2=0.5，maximum-scale=0.5,即设计稿在Retina屏幕上缩小一倍显示。其中user-scalable=no。
3、使用hotcss来自动根据设备的dpr和设计稿的font-size,求得不同设备下对应的font-size

参考文档为http://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html

https://www.w3cplus.com/css/vw-for-layout.html

当在iphone5的设备上测到某一模块的高为50px时，这个50px是CSS像素，所以该元素在设计稿中的高度应为50*2=100px。