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

内容

可以理解成生活中的绘画，而对于开发者而言，代码就是画笔，内容就是你开发过程中所画页面的最宽和最高的那个矩形，比如清明上河图就属于内容宽度很长的一幅画。

布局视口

布局视口可以理解成画板，也就是说纸张只有这么大，如果你想在A4纸上画等比例清明上河图，那显然是会溢出去的。

但是注意，开发中的布局视口并没有规范的很严格，就比如你的 标签宽度小于内部

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

视觉视口

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

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

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

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

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

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

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

就是这个样子：

上面的例子，设置

或者device-width不写(不写默认设备宽度)，最后展示的效果并没有什么差别，其原因如下：

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

理想视口的出现

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

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

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

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

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

意义：

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

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

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

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

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

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

延伸

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