只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用，才能更好地让我们的网页适配或响应各种不同分辨率的移动设备。
概念
1.物理像素(physical pixel)
物理像素又被称为设备像素，他是显示设备中一个最微小的物理部件。显示屏是由一个个物理像素点组成的，每个像素可以根据操作系统设置自己的颜色和亮度，屏幕从工厂出来那天起，它上面的物理像素点就固定不变了，单位pt。。所谓的一倍屏、二倍屏(Retina)、三倍屏，指的是设备以多少物理像素来显示一个CSS像素，也就是说，多倍屏以更多更精细的物理像素点来显示一个CSS像素点，在普通屏幕下1个CSS像素对应1个物理像素，而在Retina屏幕下，1个CSS像素对应的却是4个物理像素。关于这个概念，看一张"田"字示意图就会清晰了。
CSS像素与设备像素“田字图解”
2.CSS像素
CSS像素是一个抽像的单位，主要使用在浏览器上，用来精确度量Web页面上的内容。一般情况之下，CSS像素称为与设备无关的像素(device-independent pixel)，简称DIPs。CSS像素顾名思义就是我们写CSS时所用的像素。
CSS像素（px）用于页面布局的单位。样式的像素尺寸（例如 width: 100px）是以CSS像素为单位指定的。CSS像素与 dip 的比例即为网页的缩放比例，如果网页没有缩放，那么一个CSS像素就对应一个 dip（设备逻辑像素） 。
3.设备像素比dpr(device pixel ratio)
设备像素比简称为dpr，其定义了物理像素和设备独立像素的对应关系。它的值可以按下面的公式计算得到：
设备像素比 ＝ 物理像素 / 设备独立像素
// 在某一方向上，x方向或者y方向
在Retina屏的iphone上，devicePixelRatio的值为2，也就是说1个css像素相当于2个物理像素。通常所说的二倍屏(retina)的dpr是2, 三倍屏是3。
viewport中的scale和dpr是倒数关系。 获取当前设备的dpr：JavaScript: window.devicePixelRatio。
CSS: -webkit-device-pixel-ratio, -webkit-min-device-pixel-ratio, -webkit-max-device-pixel-ratio。不同dpr的设备，可根据此做一些样式适配(这里只针对webkit内核的浏览器和webview)。
4.设备独立像素dip与设备像素dp
dip（device independent pixels，设备独立像素）与屏幕密度有关。dip可以用来辅助区分视网膜设备还是非视网膜设备（人的视网膜在屏幕上分辨出像素点）。 dp(device pixels, 设备像素)。
安卓设备根据屏幕像素密度可分为ldpi、mdpi、hdpi、xhdpi等不同的等级。规定以160dpi为基准，1dp=1px。如果密度是320dpi，则1dp=2px，以此类推。 IOS设备：从IPhone4开始为Retina屏
CSS像素与设备独立像素之间的关系依赖于当前的缩放等级。
5.屏幕像素密度PPI(pixel per inch)
屏幕像素密度是指一个设备表面上存在的像素数量，它通常以每英寸有多少像素来计算(PPI)。屏幕像素密度与屏幕尺寸和屏幕分辨率有关，在单一变化条件下，屏幕尺寸越小、分辨率越高，像素密度越大，反之越小。
屏幕密度 = 对角线分辨率/屏幕尺寸
概念关系图
设计中px、pt、PPI、DPI、dp、sp之间的关系
通过前面的对概念的了解，简单归纳一下：
-
px：Pixel，像素，电子屏幕上组成一幅图画或照片的最基本单元 -
pt：Point，点，印刷行业常用单位，等于1/72英寸 -
PPI：Pixel per inch，每英寸像素数，该值越高，则屏幕越细腻 -
DPI：Dot per inch，每英寸多少点，该值越高，则图片越细腻 -
dp：Dip，Density-independent pixel, 是安卓开发用的长度单位，1dp表示在屏幕像素点密度为160ppi时1px长度 -
sp：Scale-independent pixel，安卓开发用的字体大小单位
接下来看看他们之间存在的关系。
pt和px
1pt = (DPI / 72) px
当Photoshop中新建画布的分辨率为72ppi( 即 72dpi时 )， 1pt=1px; 当新建画布分辨率为72 x 2 = 144ppi时，1pt=2px。
PPI和DPI
dpi = ppi
DPI最初用于衡量打印物上每英寸的点数密度。DPI值越小图片越不精细。当DPI的概念用在计算机屏幕上时，就应称之为PPI。同理： PPI就是计算机屏幕上每英寸可以显示的像素点的数量。因此，在电子屏幕显示中提到的PPI和DPI是一样的。
PPI计算方法
PPI是指屏幕上的像素密度，其计算方法为：
ppi= 屏幕对角线上的像素点数 / 对角线长度 = √ (屏幕横向像素点^2 + 屏幕纵向像素点^2) / 对角线长度
PPI
px和dp
1dp = (屏幕ppi / 160)px
dp为安卓开发时的长度单位，根据不同的屏幕分辨率，与px有不同的对应关系。
安卓端屏幕大小各不相同，根据其像素密度，分为以下几种规格：
image
| 密度 | MDPI | HDPI | XXHDPI | XXXHDPI |
|---|---|---|---|---|
| 密度值 | 160 | 240 | 320 | 480 |
| 分辨率 | 320 x 480 | 480 x 800 | 720 x 1280 | 1080 x 1920 |
1dp定义为屏幕密度值为160ppi时的1px，即，在mdpi时，1dp = 1px。 以MDPI为标准，这些屏幕的密度值比为：1dpi : mdpi : hdpi : xhdpi : xxhdpi = 0.75 : 1 : 1.5 : 2 : 3;即，在XHDPI的密度下，1dp = 2px;在HDPI情况下，1dp = 1.5px。其他类推。
dp和sp
dp和sp都是安卓的开发单位，dp是长度单位，sp是字体单位。sp与dp类似，但是可以根据用户的字体大小首选项进行缩放。Android系统允许用户自定义文字尺寸大小(小、正常、大、超大等等)。
viewport（视图）
手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分，带来的后果就是浏览器会出现横向滚动条。
1、布局视口
桌面上，视口与浏览器窗口的宽度一致，但在手机上，视口与移动端浏览器屏幕宽度是不关联的。视口的宽度设计得比屏幕宽度宽出很多，这样网站会显示得可以想象成如桌面上的那样。但是，如果网站没有为移动端做优化，那么浏览器会尽可能的缩小网站让用户能看到网站的全貌。
总结：在手机上，视口与屏幕宽度并无关联，这跟桌面上是相反的。我们称该视口为布局视口。
2、视觉视口
它是用户正在看到的网站的区域，注意是网站的区域。用户可以通过缩放来查看网站的内容。如果用户缩小网站，我们看到的网站区域将变大，此时视觉视口也变大了，同理，用户放大网站，我们能看到的网站区域将缩小，此时视觉视口也变小了。不管用户如何缩放，都不会影响到布局视口的宽度。
3、理想视口
默认情况下，一个手机或平板浏览器的布局宽度为768-1024像素。这对于手机的窄屏来说并不理想。换句话说，布局视口 的默认宽度并不是一个理想的宽度。因此理想视口被引进了。
只有当网站是为手机准备的时候才应该使用理想视口。当要添加理想视口，需要在页面里添加meta视口标签，
这行代码是通知浏览器，布局视口的宽度应该与理想视口宽度一致。这也说明了定义理想视口是浏览器的工作，而不是设备或操作系统的工作。因此，同一设备上的不同浏览器拥有不同的理想视口。浏览器的理想视口的大小也取决于它所处的设备。
设置 Viewport
移动H5适配最重要的html标签：meta视口标签
一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
meta视口标签是是设置理想视口的重要元素，主要用于将布局视口的尺寸和理想视口的尺寸相匹配。存在5个属性：
| 属性名 | 取值 | 描述 |
|---|---|---|
| width | 正整数(px) 或device-width | 控制 viewport 的大小，一般为 device-width 【设备宽度】（单位为缩放为 100% 时的 CSS 的像素）。 |
| height： | 正整数 (px)或device-height | 和 width 相对应，指定高度，但实际上却不常用。 |
| initial-scale： | [0.0-10.0] | 初始缩放比例，即页面第一次 load 时缩放比例。1即100%，2即200%，以此类推 |
| maximum-scale： | [0.0-10.0] | 允许用户缩放到的最大比例。小于或等于maximum-scale设置 |
| minimum-scale： | [0.0-10.0] | 允许用户缩放到的最小比例。大于或等于minimum-scale设置 |
| user-scalable： | yes/no | 用户是否可以手动缩放。默认值yes |
initial-scale：initial-scale=1 表示将layout viewport（布局视口）的宽度设置为 ideal viewport（理想视口）的宽度，initial-scale=1.5 表示将layout viewport（布局视口）的宽度设置为 ideal viewport（理想视口）的宽度的1.5倍。
maximum-scale: maximum-scale=3" 假设页面的默认缩放值initial-scale是1，那么用户最终能够将页面放大到这个初始页面大小的3倍。
缩放是根据理想视口进行计算的。缩放程度与视觉视口的宽度是逆相关的。也就是说，当你将屏幕放大到2倍时，视觉视口为理想视口的一半，此时每单位的CSS像素等于2个设备像素。缩小时则相反。
参考：
移动H5的meta视口标签、弹性布局原则和背景图片适配
移动前端开发之viewport的深入理解
响应式 Web 设计 - Viewport
移动端的三个视口
说说移动前端中 viewport （视口）
移动端Web页面适配方案
移动端上的设计和适配 **
网友评论