视网膜屏幕是分辨率超过人眼识别极限的高分辨率屏幕,视网膜屏的在画面效果方面远远要好于普通屏，特别对于一些画质效果要求高的用户来说;“当你所拿的东西距离你10-12英寸（约25-30厘米）时，它的分辨率只要达到300ppi这个‘神奇数字’（每英寸300个像素点）以上，你的视网膜就无法分辨出像素点了。”这也就是苹果对“视网膜屏幕”的最初定义(大多数人们的人眼实际分辨能力应该高达450ppi以上)
in：inches的缩写，英寸。就是屏幕的物理长度单位。一英寸等于2.54cm。比如Android手机常见的尺寸有5寸、5.5寸、6寸等，这里的长度都是指手机对角线的长度。
ppi像素密度：每英寸多少像素数；ppi = √(长度像素数^2+宽度像素数^2)/屏幕尺寸
lpi（线每英寸）
dpi：点每英寸
DP：设备像素（物理像素）；由厂商制定，不同厂商的标准不一样；单位pt；pt在css单位中属于真正的绝对单位，1pt = 1/72(inch),inch及英寸，而1英寸等于2.54厘米
DIP（density- independent pixel),dp：设备独立像素（这是Android中的叫法，就是web开发中CSS像素），也称为逻辑像素；CSS像素 =设备独立像素 = 逻辑像素；可以用来辅助区分视网膜设备还是非视网膜设备；与屏幕密度(硬件)有关
dpr：设备像素比；DPR = 物理像素 / 设备独立像素；一般是ppi/160的整数倍；devicePixelRatio = 物理像素 / 独立像素
浏览器缩放：缩小放大的是 CSS像素。
所有非视网膜屏幕的iphone在垂直的时候，宽度为320物理像素，当你使用；
<meta name="viewport" content="width=device-width">
的时候，会设置视窗布局宽度（不同于视觉区域宽度，不放大显示情况下，两者大小一致）为320px, 于是，页面很自然地覆盖在屏幕上。
而对于视网膜屏幕的iphone，如iphone4s, 纵向显示的时候，屏幕物理像素640像素。同样，当用户设置
<meta name="viewport" content="width=device-width">
的时候，其视区宽度并不是640像素，而是320像素，这是为了有更好的阅读体验 – 更合适的文字大小。
这样，在视网膜屏幕的iphone上，屏幕物理像素640像素，独立像素还是320像素，因此，window.devicePixelRatio等于2
从以上现象得出的结论是：
UI设计师按照手机物理像素出设计稿，切图时根据其设备像素比来换算设备独立像素（CSS像素），比如视网膜手机iPhone6，物理像素750px×1334px，由于其设备像素比为2，CSS切图时需要将设计稿的所有尺寸除以2，才是正确CSS像素值。
注意，我们通常所说的显示器分辨率，其实是指桌面设定的分辨率，而不是显示器的物理分辨率。只不过现在液晶显示器成为主流，由于液晶的显示原理与CRT不同，只有在桌面分辨率与物理分辨率一致的情况下，显示效果最佳，所以现在我们的桌面分辨率几乎总是与显示器的物理分辨率一致了
屏幕普遍采用RGB色域(红、绿、蓝三个子像素构成),而印刷行业普遍使用CMYK色域(青、品红、黄和黑)
分概念：
visual viewport：视觉视口；可视视口一般式不固定的，用户的缩放、拖动会修改;它是用户正在看到的网站的区域，注意是网站的区域（重要的事情说三遍）。用户可以通过缩放来查看网站的内容。如果用户缩小网站，我们看到的网站区域将变大，此时视觉视口也变大了，同理，用户放大网站，我们能看到的网站区域将缩小，此时视觉视口也变小了。不管用户如何缩放，都不会影响到布局视口的宽度;通过window.innerWidth获取
layout viewport：布局视口；布局视口在每一款设备上是不变的;是网页的所有内容，他可以全部或者部分展示给用户;桌面上，视口与浏览器窗口的宽度一致，在手机上，视口与屏幕宽度并无关联，这跟桌面上是相反的。我们称该视口为布局视口；在JavaScirpt上获取布局视口的宽高可以通过document.documentElement.clientWidth |document.documentElement.clientHeight得到。
手机布局视口如下
当网页的宽度大于以上的值时，就会出现横向滚动条。网页宽度小于布局视口宽度则不会出现滚动
visual viewport宽度 = ideal viewport宽度 / 当前缩放值
当前缩放值 = ideal viewport宽度 / visual viewport宽度
ideal viewport：理想视口；理想视口就是布局视口在一个设备上的最佳尺寸，理想视口下的页面便于阅读。
<meta name="viewport" content="width=device-width" /> // 这句话告诉，我要使用理想视口。也就是让布局视口的宽度等于可视视口的宽度 不指定该属性 布局视口的宽度为厂商默认的宽度 指定属性 布局视口将称为理想视口，也就是等于可视视口。
通常我们会直接指定用户的缩放比例为1 <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
width
width表示网页的布局layout宽度，控制 viewport 的大小，可以指定的一个值(默认单位px)或者特殊的值，如:
width=960, initial-scale=0.33（960是页面layout的宽度,这里设width意思是将其它缩小到大约1/3，这样正好可以在320像素的手机设备上看到整个网页）
或
width=device-width (设备的宽度,通用写法)
height
和width用法相同，指定高度。
target-densitydpi
一个屏幕像素密度是由屏幕分辨率决定的，通常定义为每英寸点的数量（dpi）。Android支持三种屏幕像素密度：低像素密度，中像素密度，高像素密度。一个低像素密度的屏幕每英寸上的像素点更少，而一个高像素密度的屏幕每英寸上的像素点更多。Android Browser和WebView默认屏幕为中像素密度。
下面是 target-densitydpi 属性的 取值范围
device-dpi –使用设备原本的 dpi 作为目标 dp。 不会发生默认缩放。
high-dpi – 使用hdpi 作为目标 dpi。 中等像素密度和低像素密度设备相应缩小。
medium-dpi – 使用mdpi作为目标 dpi。 高像素密度设备相应放大， 像素密度设备相应缩小。 这是默认的target density.
low-dpi -使用mdpi作为目标 dpi。中等像素密度和高像素密度设备相应放大。
<value> – 指定一个具体的dpi 值作为target dpi. 这个值的范围必须在70–400之间。
1 <!-- html document -->
2 <meta name="viewport" content="target-densitydpi=device-dpi" />
3 <meta name="viewport" content="target-densitydpi=high-dpi" />
4 <meta name="viewport" content="target-densitydpi=medium-dpi" />
5 <meta name="viewport" content="target-densitydpi=low-dpi" />
6 <meta name="viewport" content="target-densitydpi=200" />
为了防止Android Browser和WebView 根据不同屏幕的像素密度对你的页面进行缩放，你可以将viewport的target-densitydpi 设置为 device-dpi。当你这么做了，页面将不会缩放。相反，页面会根据当前屏幕的像素密度进行展示。在这种情形下，你还需要将viewport的width定义为与设备的width匹配，这样你的页面就可以和屏幕相适应。
initial-scale
初始缩放。即页面打开时默认的初始缩放程度。这是一个浮点值，是页面大小的一个乘数。例如，如果你设置初始缩放为“1.0”，那么，web页面在展现的时候就会以target density分辨率的1:1来展现。如果你设置为“2.0”，那么这个页面就会放大为2倍。
maximum-scale
最大缩放。即允许的最大缩放程度。这也是一个浮点值，用以指出页面大小与屏幕大小相比的最大乘数。例如，如果你将这个值设置为“2.0”，那么这个页面与target size相比，最多能放大2倍。
minimum-scale
最小缩放，用法同maximum-scale相同
user-scalable
用户调整缩放。即用户是否能改变页面缩放程度。如果设置为yes则是允许用户对其进行改变，反之为no。默认值是yes。如果你将其设置为no，那么minimum-scale 和 maximum-scale都将被忽略，因为根本不可能缩放。
注意：所有的缩放值都必须在0.01–10的范围之内。
需要注意的是，缩放是根据理想视口进行计算的。缩放程度与视觉视口的宽度是逆相关的。也就是说，当你将屏幕放到到2倍时，视觉视口为理想视口的一半，此时每单位的CSS像素等于2个设备像素。缩小时则相反。
DIP
<meta name="viewport" content="width=device-width" /> // 这句话告诉，我要使用理想视口。也就是让布局视口的宽度等于可视视口的宽度
- 不指定该属性
布局视口的宽度为厂商默认的宽度- 指定属性
布局视口将称为理想视口，也就是等于可视视口。