viewport

viewport相关理解：

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

　　2、手机屏幕逻辑像素[dip]（理想视口、分辨率、设备独立像素【代表应用使用的像素，如CSS使用的像素】），物理像素（视觉视口、像素分辨率、设备像素【设备实际拥有的像素】）经过折算（/设备像素比）之后的像素数（逻辑像素 = 物理像素  / 设备像素比），如：　　

　　

　　设备像素比（dpr）：指在移动开发中1个CSS像素占用多少设备像素，如dpr为2时，代表1个css像素用2*2个设备像素来绘制。公式为 1px = (dpr) ²  * 1dp。

　　设备独立像素（dip） = 逻辑像素 = 理想视口 = 分辨率 = CSS像素

　　设备像素（dp） = 物理像素 = 视觉视口 = 像素分辨率 
　　◆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：物理像素和逻辑像素之比。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像素：用于页面布局的单位，样式像素尺寸（如 width：66px）是以CSS像素为单位指定的。CSS像素与dip（设备逻辑像素）的比值即为网页缩放比例，即 initial-scale = CSS像素 / 设备逻辑像素（dip、理想视口），知道DPR后可以将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

转载于:https://www.cnblogs.com/L-xjco/p/11454491.html