响应式Web之视口(viewport)

视口(viewport) 这一特性在非响应式 Web 设计编码中通常是用不到的,然而它却是我们设计响应式 Web 的关键。

众所周知的媒体查询就是基于视口宽度的。

视口是什么

不同领域,视口 的含义自然有所不同。在前端领域中,由于主要是针对浏览器编程,视口自然是指计算机或设备屏幕上用户浏览网页的那块区域。

对于桌面平台的设备而言,视口指的是整个当前浏览器窗口,去掉菜单栏、工具栏、滚动条及浏览器自身的其他部件,真正用来显示网页的那块区域。

对于移动平台的手持设备而言,视口指的就是设备的屏幕显示区域。

那viewport呢

对于没有真正接触过响应式 Web 的开发者而言,viewprot 一次可能稍显陌生。因为,在传统 Web 编程中,即非响应式 Web 中,我们通常不会用到 viewprot

事实上,viewportcharset 一样,仅仅是 <meta> 元素的一个元数据属性。

charset 主要用于设置页面字符集,而 viewport 则是用于配置浏览器如何在视口内渲染整个页面。

1
2
<meta charset="utf-8">
<meta name="viewport" content="">

值得注意的是,一般一个 <meta> 元素只接受一个元数据属性值,所以我们不能简单地将 charsetviewport 这种元数据属性一起放至在一个 <meta> 元素里。

默认情况下,手机浏览器在渲染一个没有 viewport 属性的网页时,会先像桌面浏览器那样渲染页面,然后按照比例缩小它来以适配手机视口。如果页面有媒体查询是基于视口宽度的,那么它们不会生效,因为浏览器是按照桌面平台显示器尺寸来计算视口宽度的。

响应式Web开发

宽度

当为<meta> 元素提供的是 viewport 元数据属性时,我们可以在 content 属性中设置 width 参数。

width 参数用于告诉浏览器如何以多大的宽度来渲染页面。

响应式 Web 中,大部分情况下我们都希望以系统分辨率的宽度来渲染页面,以尽可能地避免缩放,以及正确地响应设备。问题是不同设备的系统分辨率是不一致的,即使在同一设备上,横竖两种手持设备方向也会让渲染方式不同。

解决这个问题的方法是,将 width 的值设置为 device-width

1
<meata name="viewport" content="width=device-width">

这样一来,浏览器就会自动以设备自身的实际宽度来渲染页面。

如果没有做上述指定,设备将使用它自己默认的视口设置来渲染页面。

初始缩放比

当为<meta> 元素提供的是 viewport 元数据属性时,我们可以在 content 属性中设置 initial-scale 参数。

参数 initial-scale 会告诉浏览器在屏幕上首次加载网页时如何缩放它。

响应式 Web 编程中,通常我们会设置

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

这意味着页面将按照 width 参数设定的宽度值来渲染页面,不放大也不缩小实际页面。

如果用的是大于或小于 1 的数值,则页面将缩放至对应的比例。直接后果就是,我们在视口内只能看见页面的一部分或者页面还没有占满整个屏幕。

viewport支持的其他content特性

除了最常用的 widthinitial-scale 参数,viewport 还支持其它许多可配置的参数。但这些参数,一般来说,在响应式 Web 开发中,开发人员应该避免显式地使用。

高度

height 可以用于配置浏览器渲染页面的高度,但响应式 Web 中,我们应该极力避免手动配置这个值。

用户可缩放

有时,在移动端浏览网页时,我们会发现某些网页是可以进行手动缩放的。这得益于 viewport 的另一个可配置参数 user-scalable,它提供了用户放大或缩小内容的能力。

user-scalable 参数默认值为 yes,即允许用户对页面进行缩放。

对于大多数网站,我们应该避免修改这个参数的默认值,以让用户在需要时可以自行缩放页面。

最大缩放比

maxium-scale 用于设置页面最大缩放比,响应式 Web 中,我们应避免配置这个参数。

最小缩放比

minium-scale 用于设置页面最小缩放比,响应式 Web 中,我们应该避免配置这个参数。

小结

响应式 Web 开发,我们应该为页面配置一个 name 值为 viewport<meta> 标签,一般来说,它应该被配置成如下这个样子:

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

参考