Web开发:布局视口、视觉视口、理想视口
内容
可以理解成生活中的绘画,而对于开发者而言,代码就是画笔,内容就是你开发过程中所画页面的最宽和最高的那个矩形,比如清明上河图就属于内容宽度很长的一幅画。
布局视口
布局视口可以理解成画板,也就是说纸张只有这么大,如果你想在A4纸上画等比例清明上河图,那显然是会溢出去的。
但是注意,开发中的布局视口并没有规范的很严格,就比如你的 标签宽度小于内部
视觉视口
视觉视口就是浏览器的宽高。只是在 PC 端,浏览器窗口可以随意改变大小,我们可以直观的看到。而在 Client 端,大部分手机、平板的浏览器是不支持改变浏览器宽高的,所以其视觉视口就是其屏幕大小。
智能手机出现后的早期状况
内容大小、布局视口、视觉视口单方面来讲,其三者并没有什么联系,这也就是早期各种浏览器厂商、开发公司各自为战的状况,其直接的结果就是 PC 端网页在 Client 上兼容很差、很乱。
后来 980px 这个布局视口宽度出现了,也就是说在手机上浏览器上,默认的布局视口宽度是 980px,默认开发者在 980px 的画板上使用代码进行页面绘制。但是这就导致了一个情况:980px的宽度大于大部分手机屏幕的宽度,为了将页面显示完全,只能对原来的页面进行缩放,如果不进行缩放,那么就需要左右拖动来浏览。
举例1:宽度为1280px在不设置视口标签的情况下 ,在 safari 中打开的默认样式:
以上各种参数的意义是:浏览器厂商默认开发者在 980px 的画板上进行开发,但是开发者实际开发的内容是 1280px 的,但是因为是显示在手机上,手机物理尺寸是 375px,于是浏览器就按照375:1280对内容进行缩放以求画面显示完全,显示完全了也就没有滚动条了。当然,这是初始状态的处理,也就是说页面打开后,你仍然可以放大页面,这时滚动条就出现了。
说到这里,需要说下<meta>
标签中"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=1280, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=2000, initial-scale=1.0">
或者device-width不写(不写默认设备宽度),最后展示的效果并没有什么差别,其原因如下:
布局视口其实,相对于实际效果(物理意义或者说是相对于用户)来说并没有什么影响,布局视口对于开发者来说实际意义重大,它规定开发者需要以这么一个宽度来进行开发,只有将布局视口按照理想视口的宽度来开发,显示出来的页面兼容性才更好、视觉效果和体验也更好。就比如上面的例子,设置 width 的各种宽度并没有太大的影响,只是如果你按照 width=device-width
来进行实际开发,在理想视口的前提下,最后的结果就是你所有的内容可以等比例、不用滑动(左右)地展现在手机屏幕上。这就相当于你画画,漏出去了,画到桌子上了,这算是你没画完吗?不算,只是视觉效果不好~~~
理想视口的出现
于是乔布斯老爷子出手了,他规定:
- 布局视口宽度 = 视觉视口宽度 = 设备宽度( = 内容宽度)
当然,最后的内容宽度是我自己加的,因为平时开发移动端页面,算上左右间距,我们实际上都应该将内容按照某一个特定手机尺寸来进行布局,最后使用合适的布局方案进行开发,这样就可以适配兼容大部分的手机了。
手机上因为浏览器窗口大小无法调整,所以视觉视口宽度就是设备宽度,所以可以精简写法:
- 布局视口宽度 = 视觉视口宽度
意义:
- 内容宽度 = 布局视口宽度
其实也很好理解,就是规定开发者在开发过程中,内容的宽度不能超出布局视口的宽度。这就好比打印报纸,你总是把墨水喷到报纸外是怎么个意思?
- 布局视口宽度 = 视觉视口宽度
视觉视口宽度已经解释,即浏览器窗口宽度。相对于浏览器窗口可以调整的 PC 端而言,视觉视口宽度就是浏览器窗口的宽度。相对于不能调整大小的 client 端而言,视觉视口宽度就是设备屏幕大小宽度。这两个宽度相等的意义在于让设备可以将内容宽度显示完整,也就是不能左右滑动,可以上下滑动。也就是这种布局理念才造就了用户从上往下浏览内容的习惯。
其实,即使你布局视口=视觉视口宽度,在内容宽度≠布局视口宽度的情况下,会出现的情况就是内容过宽,需要进行缩放来显示整个内容,但是这就导致了内容的缩小,看起来费劲。但是如果你不缩小就只能显示一部分宽度,就需要左右滑动。
所以乔布斯提出了这种“理想视口”的概念,从而在开发行为方面进行了规范、在浏览器厂商配置进行了相对统一、在用户习惯上达到了满足。由此,三个方面都达到了一种标准化的统一。
延伸
乔布斯提出的理想视口概念其实意义重大,他不仅让开发者、浏览器厂商、用户习惯各自形成了一个标准,同时理想视口也是后续很多布局方案的基础。因为有了屏幕宽度 = 布局宽度这个概念后,布局方案都是以这个标准,以此来设计出了响应式布局和单独开发 mobile 端的百分比布局方案。