Web开发：布局视口、视觉视口、理想视口

标签，在显示上也能显示出来。但在显示生活中，就比如打印机，你总是把墨水喷到报纸外面是怎么个意思？归根到底，布局视口是一个针对开发者的概念(后文会讲到)。

视觉视口

视觉视口就是浏览器的宽高。只是在 PC 端，浏览器窗口可以随意改变大小，我们可以直观的看到。而在 Client 端，大部分手机、平板的浏览器是不支持改变浏览器宽高的，所以其视觉视口就是其屏幕大小。

智能手机出现后的早期状况

内容大小、布局视口、视觉视口单方面来讲，其三者并没有什么联系，这也就是早期各种浏览器厂商、开发公司各自为战的状况，其直接的结果就是 PC 端网页在 Client 上兼容很差、很乱。

后来 980px 这个布局视口宽度出现了，也就是说在手机上浏览器上，默认的布局视口宽度是 980px，默认开发者在 980px 的画板上使用代码进行页面绘制。但是这就导致了一个情况：980px的宽度大于大部分手机屏幕的宽度，为了将页面显示完全，只能对原来的页面进行缩放，如果不进行缩放，那么就需要左右拖动来浏览。

举例1：宽度为1280px在不设置视口标签的情况下 ，在 safari 中打开的默认样式：

以上各种参数的意义是：浏览器厂商默认开发者在 980px 的画板上进行开发，但是开发者实际开发的内容是 1280px 的，但是因为是显示在手机上，手机物理尺寸是 375px，于是浏览器就按照375:1280对内容进行缩放以求画面显示完全，显示完全了也就没有滚动调了。当然，这是初始状态的处理，也就是说页面打开后，你仍然可以放大页面，这时滚动条就出现了。

说到这里，需要说下标签中 "initial-scale=1.0" 的意义。因为上述情况的存在，对于 980px 的布局视口宽度，只有缩放或者滚动来将内容显示完整，而大部分浏览器默认采用的就是缩放，所以上图会按照375:1280的比例缩放以求显示全内容，但是如果设置了 <meta name="viewport" content="width=980, initial-scale=1.0"> ，就是这个样子：

上面的例子，设置<meta name="viewport" content="width=980, initial-scale=1.0">和<meta name="viewport" content="width=device-width, initial-scale=1.0">以及<meta name="viewport" content="width=device-width, initial-scale=1.0">或者device-width瞎写或者不写(不写默认设备宽度)，最后展示的效果并没有什么差别，其原因如下：

布局视口其实，相对于实际效果(物理意义或者说是相对于用户)来说并没有什么影响，布局视口对于开发者来说实际意义肿大，它规定开发者需要以这么一个宽度来进行开发，只有将布局视口按照理想视口的宽度来开发，显示出来的页面兼容性才更好、视觉效果和体验也更好。就比如上面的例子，设置<meta name="viewport" content="width=980, initial-scale=1.0">和<meta name="viewport" content="width=device-width, initial-scale=1.0">以及<meta name="viewport" content="width=device-width, initial-scale=1.0">最后展示的效果并没有什么差别，只是如果你按照width=device-width来进行实际开发，在理想视口的前提下，最后的结果就是你所有的内容可以等比例、不用滑动(左右)地展现在手机屏幕上。这就相当于你画画，漏出去了，画到桌子上了，这算是你没画完吗？不算，只是视觉效果不好~~~

理想视口的出现

于是乔布斯老爷子出手了，他规定：

• 布局视口宽度 = 视觉视口宽度 = 设备宽度( = 内容宽度)

当然，最后的内容宽度是我自己加的，因为平时开发移动端页面，算上左右间距，我们实际上都应该将内容按照某一个特定手机尺寸来进行布局，最后使用合适的布局方案进行开发，这样就可以适配兼容大部分的手机了。

手机上因为浏览器狂口大小无法调整，所以视觉视口宽度就是设备宽度，所以可以精简写法：

• 布局视口宽度 = 视觉视口宽度

意义：

1. 内容宽度 = 布局视口宽度

其实也很好理解，就是规定开发者在开发过程中，内容的宽度不能超出布局视口的宽度。这就好比打印报纸，你总是把墨水喷到报纸外是怎么个意思？

2. 布局视口宽度 = 视觉视口宽度

视觉视口宽度已经解释，即浏览器窗口宽度。相对于浏览器窗口可以调整的 PC 端而言，视觉视口宽度就是浏览器窗口的宽度。相对于不能调整大小的 client 端而言，视觉视口宽度就是设备屏幕大小宽度。这两个宽度相等的意义在于让设备可以将内容宽度显示完整，也就是不能左右滑动，可以上下滑动。也就是这种布局理念才造就了用户从上往下浏览内容的习惯。

其实，即使你布局视口=视觉视口宽度，在内容宽度≠布局视口宽度的情况下，会出现的情况就是内容过宽，需要进行缩放来显示整个内容，但是这就导致了内容的缩小，看起来费劲。但是如果你不缩小就只能显示一部分宽度，就需要左右滑动。

所以乔布斯提出了这种“理想视口”的概念，从而在开发行为方面进行了规范、在浏览器厂商配置进行了相对统一、在用户习惯上达到了满足。由此，三个方面都达到了一种标准化的统一。

延伸

乔布斯提出的理想视口概念其实意义重大，他不仅让开发者、浏览器厂商、用户习惯各自形成了一个标准，同时理想视口也是后续很多布局方案的基础。因为有了屏幕宽度 = 布局宽度这个概念后，布局方案都是以这个标准，以此来设计出了响应式布局和单独开发 mobile 端的百分比布局方案。