本节书摘来异步社区《高性能响应式Web开发实战》一书中的第2章,第2.3节,作者: 李光毅 责编: 杨海玲,更多章节内容可以访问云栖社区“异步社区”公众号查看。
2.3 视口
2.3.1 桌面浏览器的视口
在桌面浏览器中,假设某个页面的宽度设置为自适应的100%: html {width: 100%;},这意味着html宽度始终与浏览器宽度保持一致。
同时,浏览器宽度也等价于浏览器可视区域宽度,所以在桌面浏览器中,浏览器可视区域大小决定了页面的布局。所见即所得,浏览器窗口多大,就会以多大的尺寸影响页面布局。我们称这里的可视区域大小为布局视口(layout viewport),或者简称为视口(viewport),如图2-14所示。
在本书后面的内容中,如果没有特别说明,所称视口皆为此概念。当然,如果页面布局为固定宽度布局,页面布局就不会受到视口大小影响,但是在视口之外的内容,需要通过控制浏览器视口的滚动栏才能看见。
桌面端视口的特点是,浏览器区域大小受限于显示器屏幕大小,这也意味着页面的宽度不会超过浏览器屏幕宽度。读者可能会纳闷,为什么上面这么显而易见的事情会称为“特点”?因为在移动设备上不是这样的,也无法做这么一个设定。
假设在100%宽度的body内还有一些占用宽度为10%的元素,如果以桌面视口的定义,10%宽度的元素实际宽度最大只能是系统分辨率的10%,则在1920×1080的显示器上浏览器最大化的情况下,该元素最大宽度为192 px。若在iPhone 4上浏览这个页面,如果iPhone 4仍然继承的是桌面视口的设定,那么用户看到只是一个32 px的元素,这是根本是无法识别的,这样的容器也不可用。
所以,移动设备的视口定义与桌面并不相同,但视口同样是用于控制页面布局渲染的。
2.3.2 移动设备浏览器的视口
对于移动设备上的浏览器来说,仍然需要一个区域用于控制页面的布局渲染。只不过这个区域不再以屏幕尺寸作为限制。
以iPhone 4为例,Safari渲染页面布局的默认宽度为980 px(CSS像素)。但是,用户可能觉得并非如此,因为当用户用Safari打开一个网站桌面版后,他看到的页面宽度刚好是与屏幕宽度相等的,如图2-15所示。但是iPhone 4的系统宽度分辨率不是320 px吗?
其实之所以这样是因为浏览器做了两件事,如图2-16所示:
(1) 用980 px像素宽度渲染页面;
(2)将页面缩放至宽度与系统宽度一致。
用户使用手势缩放页面也是同样的原理。浏览器和用户在这里并没有改变页面(准确来说是视口)的大小(size),只是改变了视口的缩放比例(scale)。
但是,浏览器使用默认的980 px去渲染页面并非是万能的。例如,当页面比较窄时(如只有320 px宽),页面效果会非常糟糕,如图2-17所示。
设计人员希望以页面的宽度来渲染页面,并能自然自适应到系统宽度。于是手机厂商(最早是在Safari中)提供了一个名为viewport的标签设置视口大小。例如,在上一个用例中,当我们想以320 CSS像素渲染页面时,可以在
<meat name="viewport" content="width=320" />
通过在content属性中设置width参数,即可以手动调整宽度,也可以添加initial-scale参数来控制渲染时缩放视口的比例。如果未添加该参数,浏览器自动会将页面缩放至与浏览器宽度一致。
<meat name="viewport" content="width=320, initial-scale=1.0" />
以图2-18中320 px宽的图片为例,通过混合配置width和scale参数,我们能随意控制缩放比例页面的大小。
在前几节中常说的“系统分辨率”就是视口大小,有兴趣的读者可以去viewportsizes.com上查找自己感兴趣的设备的视口大小。
2.3.3 设备宽度
大部分情况下我们都希望以系统分辨率的宽度来渲染页面,以尽可能地避免缩放,以及正确地响应设备(例如,页面布局是在320 px宽度的限制下进行设计的,我们当然希望设备以320 px宽度来渲染布局,而不是用980 px渲染后再进行缩放)。问题是不同设备的系统分辨率是不一致的,即使在同一种设备上,横竖两种持握方式也会让渲染方式不同。
但是,我们可以不用关心具体的数值,只要告诉浏览器:“无论什么设备,什么样的持握方式,请按照系统分辨率宽度渲染。”
于是我们可以将width的值设置为device-width。例如:
<meta content="width=device-width, initial-scale=1.0" />
那么我们就把获取具体系统分辨率宽度这个任务交给浏览器了,就由浏览器具体情况具体执行,如图2-19所示。