viewport

物理像素、像素、分辨率、PPI关系：

　　1、手机屏幕是硬件属性，无法通过js或meta标签修改。手机屏幕物理像素，即像素、分辨率、PPI（pixel per inch）可以表示同一类描述。

　　物理分辨率指的是显示屏的最高可显示的像素数。如该电脑的最高分辨率是 1920 * 1080。但对于电脑来说，其分辨率可以调整，但最大不能大于物理分辨率，如调为1600 * 800（这时候桌面会变大而模糊）。可以说分辨率属于物理分辨率。对于电脑设备来说物理分辨率是一个最大值，不可调，而分辨率可调节，但对于移动设备来说，应该就是固定值了，那物理分辨率大小 = 分辨率大小。但不说明分辨率和物理分辨率是统一概念。

　　   分辨率由水平和垂直的像素点组成。比如说分辨率为1024 * 768 表示的是横向有 1024 个像素点，纵向有768 个像素点，细化描述指每一条水平线上包含 1024 个物理像素点，一共有768 条水平线，所以在相同尺寸屏幕上，像素点越多，显示越精细，效果越好。

　    像素就是物理像素。

　      我想可以由分辨率来更好的表达物理像素、像素的数目，如分辨率为 750 * 1334 的iPhone6，它的横向有750个物理像素或像素。PPI表示的是对角线的分辨率，也就是每单位长度的对角线所含的物理像素、像素个数。

　　  在同一尺寸（宽高）一样的设备中，分辨率不一样，那一像素代表的大小也不一样，则页面效果不同，说明物理像素不是用来表示开发描述的。css则是。

　　

2、手机屏幕设备像素dp可以简称设备物理像素、像素分辨率，表示的是视觉视口。
　  手机屏幕逻辑像素dip可以简称设备独立像素、css像素，表示的是理想视口。

　　

　　设备像素比（dpr）：指在移动开发中1个CSS像素占用多少设备像素，如dpr为2时，代表1个css像素用2*2个设备像素来绘制（这里不要觉得是水平1css像素等于 4 设备像素，其实是  1 * 1css像素 = 2 * 2设备像素，也就是水平的1css像素等于2个设备像素）。公式为 1px = (dpr) ²  * 1dp（这里指的是整一个水平和垂直的表示了）。

　　
　　◆1 inch = 2.54cm = 25.4mm
　　◆像素（pixel），图形元素，既不是一个确定的物理量，也不是一个点或小方块，而是一个抽象的概念。计算机每块像素都具有固定地址，通过地址为其分配颜色，可以理解为屏幕上每个分配颜色的最小色块。
　　◆屏幕尺寸：指的是显示屏对角线的长度（diagonal），如iphone6s的5.5英寸。
　　◆屏幕分辨率：屏幕上以水平和垂直方向显示的像素个数，如iphone6s的1920 * 1080。
　　◆像素密度PPI（pixel per inch）：沿着对角线，每英寸所拥有的像素（pixel）数目，如iphone6s的ppI = V(1920² + 1080²) / 5.5 = 401，V表示开根号。

　　
　　◆DPI的点（Dot）可以说是硬件设备中最小的显示单位。

iphone手机型号	屏幕尺寸 （inch）	像素尺寸 （物理像素px）	屏幕像素密度 （PPI）	理想视口尺寸 （逻辑像素px）	缩放 （DPR）
ipone2G/3G/3GS	3.5	320 * 480	163	320 * 480	1
ipone4/4s	3.5	640 * 960	326	320 * 480	2
ipone5/5S/5C/SE	4	640 * 1136	326	320 * 568	2
ipone6/6/7/8	4.7	750 * 1334	326	375 * 667	2
ipone6plus/6S+/7+/8+	5.5	1242 * 2208	401	414 * 736	3
iponeX	5.8	1125 * 2346	458	375 * 812	3

　　3、CSS像素：适用于web编程，指的是我们在样式代码中使用到的逻辑像素，是一个抽象概念，实际并不存在。而设备逻辑像素：与设备无关的逻辑像素，代表可以通过程序控制使用的虚拟像素，是一个总体概念，包括了CSS像素。也就是说css像素可以等于设备逻辑像素。

　　◆PX：虚拟像素，可以理解为“直觉”像素，css、js使用的抽象单位，浏览器内的一切长度都是以css像素为单位的，css像素单位是px，由于CSS像素是一个视角单位，所以在真正实现时，为了方便基本都是根据设备像素换算的。

　　◆在CSS规范中，长度单位分为绝对单位及相对单位，px属于相对单位，其相对于设备像素（dp），表现为同一设备或不同设备间，每一个CSS像素所代表的物理像素是可以变化的。

　　◆pt在CSS单位中属于绝对单位，1pt = 1/72（inch）

　　　　

　　4、<meta name="viewport" content="width=device-width; initial-scale=1; minimum-scale=1; maximum-scale=1" />

属性名	取值	描述
width	正整数 或 device-width	定义视口的宽度，单位为像素
height	正整数 或 device-height	定义视口的高度，单位为像素，一般不用
initial-scale	[0.0-10.0]	定义初始缩放值
minimum-scale	[0.0-10.0]	定义缩小最小比例，它必须小于或等于maximum-scale设置
maximum-scale	[0.0-10.0]	定义放大最大比例，它必须大于或等于minimum-scale设置
user-scalable	yes/no	定义是否允许用户手动缩放页面，默认值yes

　　◆device-width在HTML中可以理解为理想视口宽度，即320px、375px、414px，这里的px指的是css像素，通常称为逻辑像素。

　　5、DP（device pixels）：设备像素（物理像素），显示屏由一个个物理像素点组成，通过控制每一个像素点的颜色，使屏幕显示出不同的图像，单位为pt（point），屏幕从工厂出来那天起，其上面的物理像素点就固定不变了。

　　6、ppi和dpr，ppi作用于显示设备的工业标准，ppi到达多少是高清屏，此时对应的dpr是多少，不直接说显示设备的dpr是多少，是因为对像素分辨率比较熟悉。

像素密度（PPI）	ldpi	mdpi	hdpi	xhdpi	xxhdpi	xxxhdpi
像素密度范围	<120 dpi	120~160 dpi	160~240 pdi	240~320 dpi	320~480 pdi	480~640 dpi
代表分辨率	240 * 320	320 * 480	480 * 800	720 * 1280	1080 * 1920