在讲 viewport 之前，要引入一个概念，就是
css 中的 1px 不等于设备的 1px
在 css 中我们一般使用 px 作为单位，在桌面浏览器中 css 的1个像素往往都是对应着电脑屏幕的1个物理像素，但是这个1像素的 css 像素跟1像素的物理像素是两个东西。
css 中的像素只是一个抽象的单位，在不同的设备或不同的环境中，css 中的 1px 所代表的设备物理像素是不同的。同时，不同设备的像素密度不同，随之他们的屏幕物理像素也会各有不同。
还有就是用户的缩放也会引起 css 中的 px 的变化，例如，当用户把页面放大一倍，那 css 中的 1px 所代表的物理像素也会增加一倍；反之亦然。从这个角度来看就比较浅显易懂了吧~ 总之，就是要先理解 css 中的 1px 跟 物理像素的 1px 是两个东西啦。接下来就可以讲 viewport 了。
1.什么是 viewport
这里引用一下菜鸟教程里用到的一个说明
viewport 是用户网页的可视区域。
viewport 翻译为中文可以叫做"视区"。
手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。
通俗的讲，移动设备上的 viewport 就是设备的屏幕上能用来显示我们的网页的那一块区域，再具体一点，就是浏览器上用来显示网页的那部分区域，但 viewport 又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域要大，也可能要大。一般来讲，移动设备上的 viewport 都是要大于浏览器可视区域的。也就是说，移动设备上的 viewport 通常都会比它的可视区域的宽度要大（viewport 不是可视区域的宽度哦），也就会出现横向滚动条或者一些其他的奇怪的东西。那么也就是需要我们来设置一下这个 viewport 的值啦。
2.通过 meta 标签来设置 viewport
之前提到过，我在 meta 标签里写的
<meta name="viewport" content="width=device-width, initial-scale=1.0">这是个啥意思呢？
看看下个表格吧
| width | 设置 layout viewport 的宽度，为一个正整数，或字符串 "device-width" |
|||
| initial-scale | 设置页面的初始缩放值，为一个数字，可以带小数 | |||
| minimum-scale | 允许用户的最小缩放值，为一个数字，可以带小数 | |||
| maximum-scale | 允许用户的最大缩放值，为一个数字，可以带小数 | |||
| height | 设置 layout viewport 的高度，这个属性对我们并不重要，很少使用 | |||
| user-scalable |
是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许 | |||
这些属性可以同时使用，也可以单独使用或混合使用，多个属性同时使用时用逗号隔开就行了。
定睛一看，咦？那个 layout viewport 又是什么鬼？
不着急不着急，我这就解释
国外大神ppk认为移动设备上有三个 viewport
layout viewport 、visual viewport 和 ideal viewport
具体可以看看他的这三篇文章：
layout viewport 的宽度可以通过 document.documentElement.clientWidth 来获取
visual viewport 的宽度可以通过 window.innerWidth 来获取
就是下面这张图
在这里假装你们看懂了，我就不细说这两个 viewport 了
重点是 ideal viewport
ideal viewport 就是移动设备的理想 viewport，它并没有一个固定的尺寸，不同的设备拥有不同的 ideal viewport 。ideal viewport 的宽度等于移动设备的屏幕宽度。
ideal viewport 的意义在于，无论在何种分辨率的屏幕下，那些针对 ideal viewport 而设计的网站，不需要用户手动缩放，也不需要出现横向滚动条，都可以完美的呈现给用户。
3.把当前的 viewport 宽度设置为 ideal viewport 的宽度
要得到 ideal viewport 就必须把默认的 layout viewport 的宽度设为移动设备的屏幕宽度。因为 meta viewport 中的 width 能控制 layout viewport 的宽度，所以我们只需要把 width 设为 device-width 这个特殊的值就行了。
<meta name="viewport" content="width=device-width">但是这样写，要注意的是，在 iPhone 还是 iPad 上，无论是竖屏还是横屏，宽度都是竖屏的 ideal viewport 的宽度
以下这样写也能达到和上一句代码一样的效果，也可以把当前的 viewport 变为 ideal viewport
<meta name="viewport" content="initial-scale=1">因为缩放是相对于 ideal viewport 来进行缩放的，那缩放值为 1 的时候，不就得到了 ideal viewport 了嘛
但是这样写，就轮到在 IE 上无论是竖屏还是横屏都把宽度设为竖屏的 ideal viewport 了
那怎么办呢？
这里要知道的是
当 width 和 initial-scale 同时出现的时候，浏览器会取它们两个中较大的那个值
所以，完美的解决方案就是
<meta name="viewport" content="width=device-width, initial-scale=1">还有更多可以深入了解的知识在下面的链接里~