响应式布局进阶篇 – viewport

作者 | Brilliant Open Web团队

本文承接前两篇文章,主要介绍如何正确设置 Web 页面的 viewport,为后续编写用户体验良好的响应式布局页面做准备。

在前面的文章中,我们已经了解了一些视口(viewport)相关的单位 `vw``vh` 等,如 100vw = 100% 视口宽度。但视口宽度是多少呢?本文就来给大家讲解在响应式布局页面中,视口所发挥的作用。

 

设置 viewport

viewport(视口)是用户可以看到的 Web 页面视口区域。在早期,许多 Web 页面没有针对移动端优化。由于移动设备像素比较低,多为 320px,从而在打开 PC 端的页面时,会因为视口太窄导致页面布局错乱。为了解决这个问题,浏览器会在一个虚拟视口中渲染页面,通常会将 viewport 设置为一个较大的值(如 Safari 默认是 980px),这样 PC 端的网页在移动设备浏览器上都能在一屏内显示所有内容,只是页面元素看上去比较小。用户可能需要通过水平滚动、缩放等操作才能查看页面的不同区域,体验很差。

但是,移动互联网发展了这么长时间,已经不再像移动互联网初始阶段一样存在大量超过 980px 的页面,同时,很多移动端站点都会使用媒体查询等其他技术来适配较窄的屏幕,那么浏览器提供的虚拟视口就不再必要了。

 

为了支持响应式布局,我们首先需要通过 viewport meta 标签正确设置页面的 viewport。一个针对移动端做过优化的站点中,应该包含以下类似的内容:

<meta name="viewport" content="width=device-width, initial-scale=1">

其中 width 控制视口的宽度,可以设置为设备宽度 device-width,或是具体的像素值。在上面的例子中,viewport 的宽度设置为 device-width。这意味着,如果屏幕宽度是 375px(如 iPhone X),则浏览器也使用 375px 的视口宽度来渲染页面,而不是使用 980px 或其他宽度使页面缩小展示。initial-scale=1 设置了浏览器首次加载页面时的初始缩放级别。我们还可以通过 minimum-scale 和 maximum-scale 等属性控制用户的缩放操作,但这也可能导致页面的可访问性问题。更多的属性可以参考下表:

字段名 取值 说明
width 正整数、device-width 定义视口的宽度,单位是 CSS 像素,如果等于 device-width,则为理想视口宽度
height 正整数、device-height 定义视口的高度,单位是 CSS 像素,如果等于 device-height,则为理想视口高度
initial-scale 0 ~ 10 初始缩放比例,允许小数点
minimum-scale‍‍ ‍‍0 ~ 10 最小缩放比例,必须小于等于 maximum-scale
maximum-scale 0 ~ 10 最大缩放比例,必须大于等于 minimum-scale
user-scalable yes、no 是否允许用户缩放页面,默认是 yes
确保内容不会超出 viewport

用户通常习惯垂直滚动浏览页面。在设置 width=device-width 后,如果有页面元素的宽度超出了视口宽度,就会强迫用户通过水平滚动或缩小页面来浏览页面全部内容,带来糟糕的用户体验。因此,不能期望设置 viewport 宽度就能解决所有适配问题,开发者还需记住以下原则:

  1. 不要使用大的固定宽度的元素,如果不考虑穿戴式设备,不要设置大于 320px 的宽度

  2. 不应该让内容在某一个特定宽度的 viewport 下才能正常显示

  3. 使用相对单位或者媒体查询让元素在不同大小的视口下适配

如推荐使用 width: 100% 而不是 width: 320px 来确保元素占满容器宽度。否则对于不同视口宽度的设备来说,页面的体验将会不一致,也有可能使元素意外超出视口宽度。

对于图片或者视频等嵌入式的元素,可以在站点 CSS 中添加下面的代码:

img, embed, object, video {  max-width100%/* 设置 img 等元素最大宽度为 100% */}
总结

本文首先从视口相关单位出发,引出了视口的概念。接着介绍了视口的历史背景,以及设置视口的正确方法。利用 meta 标签将视口宽度设置为设备宽度,可以使页面在移动端下有良好的展现。最后列举了一些为确保页面元素不超出视口宽度的注意事项。开发者可以利用这些视口相关的最佳实践,编写出用户体验良好、且适用于不同尺寸屏幕的页面。

未经允许不得转载:大自然的搬运工 » 响应式布局进阶篇 – viewport

赞 (0)

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址