一，什么是视口？
以前页面是直接丢到浏览器里面就直接运行了，但是现在移动端，默认会给页面添加了一个中间层，就是页面和浏览器中间会介入一个第三者，就是视口，也就是说视口会把页面包裹起来然后在放到浏览器里面进行渲染，而视口默认的大小一般是980，会比手机的物理设备的尺寸要大，同时视口会自动缩小到手机的屏幕大小，这就是为什么一个PC端的页面扔到移动端的话并没有出现滚动条，而是缩小的本质原因。 理解的简单一点就是在页面外面包裹了一个默认大小为980（绝大多数）的盒子，这个盒子具备scale功能，并且同时在默认情况下会整体缩放（里面承载的网页也缩小了）到当前用户手机的屏幕大小，这是视口标签最开始出来的意义，持续了一段时间，但是发现这种体验不太好，因为一旦缩小页面就会很小看不清，一旦放大就会又看不完全。所以就有人开始做另一种手机网页模式就是不让视口标签去缩放，也不让用户去缩放，并且让视口的宽度就等于当前设备的宽度，就基于当前的屏幕分辨率去设计专门的设计图，针对差异不大的手机屏幕是采用自适应技术。
二，像素
像素实际上分为设备像素和css像素两种。
设备像素：设备屏幕的物理像素，任何设备的物理像素的数量都是固定的。
css像素：
为Web开发者创造的，在CSS（和JavaScript）中使用的一个抽象的层。
说明一下：web开发过程中，我们基本使用的都是CSS像素，设备像素基本不会用。例如：200px 的元素跨越了 200 个CSS像素。CSS像素相当于多少个设备像素取决于屏幕的特性（是否高密度）和用户进行的缩放。当用户放大的越大，一个CSS像素覆盖的设备像素就越多，因此这个元素不一定会跨越css设置等值的设备像素。在旧的屏幕上，当缩放程度为100%时，一个CSS像素等于一个设备像素。在高密度屏幕上，例如苹果的视网膜屏幕，一个CSS像素跨越了多个设备像素。对照下图： （红色表示CSS像素、蓝色表示设备像素） 我们在开发中，操作的是CSS像素，让CSS像素去覆盖设备像素。不过当我们使用CSS和JavaScript的时候，其实并不会在意一个CSS像素跨越了多少个设备像素。这个依赖于屏幕特性和用户缩放程度的计算由浏览器完成。
像素密度：
屏幕是由很多像素点组成的。手机屏幕的物理尺寸，和像素尺寸是不成比例的。最典型的例子，iPhone 3gs的屏幕像素是320x480，iPhone 4s的屏幕像素是640x960。刚好两倍，然而两款手机都是3.5英寸的。所以，要引入最重要的一个概念：像素密度，也就是PPI（pixels per inch）。这项指标是连接数字世界与物理世界的桥梁。Pixels per inch，准确的说是每英寸的长度上排列的像素点数量。1英寸是一个固定长度，等于2.54厘米，大约是食指最末端那根指节的长度。像素密度越高，代表屏幕显示效果越精细。Retina屏比普通屏清晰很多，就是因为它的像素密度翻了一倍。 Retina屏幕把2x2个像素当1个像素使用。比如原本44像素高的顶部导航栏，在Retina屏上用了88个像素的高度来显示。导致界面元素都变成2倍大小，反而和3gs效果一样了。画质却更清晰。在以前，iOS应用的资源图片中，同一张图通常有两个尺寸。会看到文件名有的带@2x字样，有的不带。其中不带@2x的用在普通屏上，带@2x的用在Retina屏上。只要图片准备好，iOS会自己判断用哪张，Android道理也一样。
设备像素比(DPR)像素比的计算公式：
公式成立的大前提：（缩放比例为1）
设备像素比(DPR) = 设备像素个数 / 理想视口CSS像素个数(device-width)
与理想视口一样，设备像素比对于不同的设备是不同的，但是他们都是合理的，比如早起iphone的设备像素是320px，理想视口也是320px，所以早起iphone的DPR=1，而后来iphone的设备像素为640px，理想视口还是320px，所以后来iphone的DPR=2。在开发中，打开浏览器的调试工具可以看到设备像素比，如下图：
如上图，我们可以获得以下信息：
iPhone5的理想视口是：320*568 <==> device-width = 320，device-height = 568
iPhone5的设备像素比：2
根据公式：设备像素比(DPR) = 设备像素个数 / 理想视口CSS像素个数(device-width)
可知iPhone5的设备像素为 640*1136
缩放
在讲设备像素比公式的时候讲到了：
公式成立的大前提：（缩放比例为1）
设备像素比(DPR) = 设备像素个数 / 理想视口CSS像素个数(device-width)
那么缩放到底是什么呢？也许这个问题让你很疑惑，如果你自己阅读了前面的内容，你会注意到CSS像素的大小是可变得，而缩放从技术实现的角度来讲，就是放大或缩小CSS像素的过程，怎么样？明白了吧，当你用双指缩放页面的时候，实际上是在放大或缩小CSS像素。
三，三个视口
一看标题，你是不是蒙了？三个视口？什么三个视口？先别急，让我们慢慢来讲。
你一定写过这样一条样式： 25%; 但是你有想过给一个元素加上这样一条样式之后发生了什么吗？25%是基于谁的25%？明白的同学可能知道了：一个块元素默认的宽度是其父元素的100%，是基于起父元素的，所以25%指的是父元素宽度的25%，所以，body元素的默认宽度是html元素宽度的100%，那么你有没有想过html元素的宽度是基于谁的呢？这个时候，就要引出一个概念：初始包含块和视口了
记住一句话：视口是html的父元素，所以我们称视口为初始包含块。 这样你就明白了，html元素的百分比是基于视口的。
首先你需要了解一个原因：浏览器厂商是希望满足用户的要求的，即在手机也能浏览为PC端设计的网站，所以浏览器厂商必须想办法来在满足~
在PC浏览器中，视口只有一个，并且 视口的宽度 = 浏览器窗口的宽度，但是在移动端也要根据这个来设计的话，那么PC端设计的网站在移动端看起来会很丑，因为PC端的网页宽度在800 ~ 1024个CSS像素，而手机屏幕要窄的多，这个时候再PC端25%的宽度在移动端看起来会很窄。所以，布局视口的概念产生了。
布局是口：移动端CSS布局的依据视口，即CSS布局会根据布局视口来计算。
也就是说，在移动端，视口和浏览器窗口将不在关联，实际上，布局视口要比浏览器窗口大的多(在手机和平板中浏览器布局视口的宽度在768~1024像素之间)，如下图（布局视口和窗口的关系）：
可以通过以下JavaScript代码获取布局视口的宽度和高度：
document.documentElement.clientWidth
document.documentElement.clientHeight
第二个视口：视觉视口
视觉视口可能要更好理解一些，他就是用户正在看到网站的区域，如下图：
第三个视口：理想视口
理想视口，这是我们最需要关注的视口，现在我们来回顾一下我们知道了哪些视口，有两个，分别是：布局视口，视觉视口。
我们前面提到过，布局视口的宽度一般在 680~1024像素之间，这样可以使得PC网站在手机中不被压扁，但是这并不理想，因为手机更适合窄的网站，换句话说，布局视口并不是最理想的宽度，所以，就引入了理想视口。
理想视口，定义了理想视口的宽度，比如对于iphone5来讲，理想视口是320*568。但是最终作用的还是布局视口，因为我们的css是依据布局视口计算的，所以你可以这样理解理想视口：理想的布局视口。下面这段代码可以告诉手机浏览器要把布局视口设为理想视口：
<meta name="viewport" content="width=device-width" />
上面那段代码告诉浏览器：将布局视口的宽度设为理想视口。所以，上面代码中的width指的是布局视口的宽 device-width 实际上就是理想视口的宽度。
【视口标签的参数】
- width：宽度设置的是viewport宽度，可以设置device-width特殊值
- initial-scale：初始缩放比，大于0的数字（缩放是基于屏幕来的）
- maximum-scale：最大缩放比，大于0的数字
- minimum-scale：最小缩放比，大于0的数字
- user-scalable：用户是否可以缩放，yes或no（1或0）；
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=2.0, maximum-scale=1.0, minimum-scale=1.0"> <title>视口</title> </head>