一：viewport概念

通俗的讲,移动设备上viewport就是显示我们网页的那部分区域。

再具体一点讲,viewport就是移动设备上浏览器或者webview显示我们网页的那一部分区域，它不一定等于我们浏览器的可视区域，有可能比我们浏览器的可视区域大，也可能比我们的可视区域小。

通常来说，移动设备上的viewport部分要比我们浏览器的可视区域要大，这是因为移动设备的分辨率一般比电脑要小。所以为了正常显示那些传统的（未做移动适配）的桌面网站，移动设备上的浏览器都会把自己默认的viewport设为980px或者1024px(也可能是其他值，这个由移动设备自己决定)。这个值又比实际的移动设备浏览器的可视区域要大，所以会出现浏览器横向滚动条。

下边我们看看不同设备上浏览默认的viewport值。

二：css中的px为独立像素

css中的像素是个抽象单位，在不同设备环境中显示的物理像素是不同的。

物理像素 = 独立像素 * devicePixelRatio（设备物理像素和设备独立像素的比例）

css中的像素相当于独立像数。

但是要注意的是，devicePixelRatio在不同的浏览器中还存在一些兼容性问题，所以我们现在还并不能完全信赖这个东西，具体的情况可以看下这篇文章。

devicePixelRatio的测试结果：

三：3个viewport理论

1：layout viewport 布局视窗

这个比浏览器实际可视区域大，也就是我们的移动设备上浏览器默认的viewport值。（不同设备上浏览器的viewport默认值是不一样的）

可以通过document.documentElement.clientWidth来获取这个值。

2：visual viewport 可视视窗

就是移动设备上浏览器或者webview的可视区域，可以通过window.innerWidth来获取。

3：ideal viewport 完美视窗

完美视窗当然是完美适配。简单的说就是在任何设备中layout viewport = visual viewport。

首先不需要用户缩放和横向滚动条就能正常显示网站上的所有内容

然后显示的文字大小也是合适的，比如一段14px的文字，不会因为在高密度像素的屏幕上显示得太小就无法看清。理想的是在任何一种密度的屏幕上，任何分辨率下，显示出来的大小都是差不多的。当然，不仅仅是文字，其他元素比如图片也都是这个道理。

ideal viewport并没有一个固定的尺寸，不同的设备拥有不同的ideal viewport。

我们用meta来控制这个ideal viewport

content字段