viewport的理解

以前一直没有注意过这个属性的含义,后来在做移动端的一些设计的时候,这个属性已经成了必不可少的东西,所以才找了时间去好好理解一下。

先提一个概念 —— 像素比,这个东西指的是设备物理像素与设备无关像素(dips)的比例。设备的物理像素很好理解,就是设备的分辨率,那dips是什么东西呢?这个我们可以直接将其理解为屏幕的可视区域大小。比如显示器的分辨率为1600px,那么设备的物理像素就是1600px,而显示器的可视区域只有800px,那么这800px即是显示器的dips,于是我们可以知道该设备的像素比为2。

知道了像素比和dips,再来说一说我们的CSS样式中的像素。在未进行任何设置的情况下,CSS中的像素与设备的物理像素保持一致。这时我们设置CSS中的1px,对应到屏幕中去实际的像素也是物理像素的1px。

我们这里使用一张200 X 200的图片来演示。

代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.photo {
width: 200px;
height: 200px;
border: solid 1px #000;
background: url(./author.jpg) no-repeat;
background-size: 100% 100%;
}
</style>
</head>
<body>
<div class="photo"></div>
</body>
</html>

未添加viewport

上面是未添加viewport的图片,下面是添加了viewport的图片。

添加了viewport

从上面的对比我们可以发现,在未添加viewport时,虽然设备的dips只有375 X 667,但是由于CSS中的1px是与屏幕分辨率对应的,所以我们设置的图片会显示的很小。而通过设置viewport我们将CSS像素与dips比例设置为1,这时CSS中的1px与dips保持一致,图片便会变大。

在知道了上面的事情,我们可以大致理解viewport的作用,即改变CSS像素与dips的比例,下面是viewport的其他属性解析。

viewport属性表格

需要注意的是,通常我们不会给widthheight属性设置具体的数值,而是通过设置width=device-width来使viewport的大小与设备大小即dips一致。

参考文章: