理论上我们是应该在每个目录中放一套不同分辨率的图片，app会根据设备的分辨率自动进行加载，那么这些不同分辨率的数值标准又是什么呢？google官方给出了以下标准：
没错，依然是通过像素密度（dpi）来做划分，目前市场上的主流机型基本都在xxhdpi范围内，所以一般情况下在xxhdpi放一套图就能满足需求了。苹果手机则比较简单的分为非高清屏、高清屏和超高清屏，对应的机型有iphone3（163ppi）、iphone6（326ppi）和iphone6 plus（401ppi），都是类似的道理。梳理了一遍这些单位之后，接下来就是要介绍移动页面相关（mobile page）的单位以及viewpoint。
移动web单位和viewport在移动web网页开发中用到的单位也是px，但和上面谈到的px要完全区分开，因为在安卓程序中谈到的px指的就是设备的物理像素，而在移动网页开发中css里的px像素只是一个抽象单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同的，它的名字叫“设备独立像素”，它是浏览器中使用的抽象单位，也叫“css逻辑像素”，而设备物理像素和设备独立像素的比值叫devicePixelRatio，它是移动浏览器中的window对象的一个属性。例如：在Retina屏的iphone上，devicePixelRatio的值为2，也就是说1个css像素相当于2个物理像素，同样的用一个例子来说明。
首选准备一个简单的页面，只放一个大小为1280px*768px的div：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Test 01</title> <style> .pic{ width: 768px; height: 1280px; background-color: #FFE872; color: white; font-size: 150px; text-align: center; line-height: 1280px; font-family: cursive; } </style> </head> <body> <div class="pic"> Yellow </div> </body> </html>在PC浏览器中的效果图如下：
由于我们的PC显示器的分辨率为1366*768，所以在浏览器中显示纵向肯定会出现滚动条的，但之所以将这个div设置为1280*768是因为假如没有上述的“屏幕独立像素（css逻辑像素）”的概念，那么这个div应当在一个1280*768像素的手机上满屏显示，我们在上面创建的Google Nexus 4正好是这个分辨率：，所以我们就在这个设备上看一下该页面的效果：
如上图所示，有留边，很明显并没有占满屏幕，这里我们先明确一点就是物理像素和逻辑像素存在明显差异，其次再看一下上面提到的dpr（缩放比）的问题，我们使用的虚拟设备Google Nexus 4的dpr也为2（看下图），所以说它实际的分辨率为640*384，那么问题来了，我的图片是768*1280px，那么在640*384的小屏幕上为什么还显示不全呢？理论上应该不但能全显示，而且只能显示图片总面积的1/4（经纬度分别为1/2，所以总面积为1/4）呢？这里明确两点，首先我们说的这一点没错，看下面这幅图：
首先有一个小问题就是chrome的手机调试工具中的Nexus 4 为384*567而并非384*640，这个不用在意，安卓模拟器中的Nexus 4是768*1280px，版本问题而已。观察上面的chrome手机调试工具中的效果（page sacle=1.0表示正常页面比例，即0缩放），C、D标注是横纵向的两个滚动条，也就是说我滚动到刚好能看到这个div的右下部分，同时再看A、B标注的标尺部分，可视范围内，横向是400到800，纵向是750到1350，也就是说横纵差不多都显示了1/2，也就是说图中的可视面积正是div总面积的1/4，符合我们上面的计算，这是第一点，接下来再考虑安卓模拟器中为什么没有和上面一样，而是没有占满屏幕呢？原因正是因为viewport的存在，接下来具体介绍一下viewport的概念。