深入浅出 Viewport 设计原理

// iPhone6
window.screen.width;// 375px
window.screen.height;// 667px

通常，我们在 CSS 中设置的元素尺寸，本质上都是基于逻辑分辨率进行布局的。

8、iPhone 常见的几种规格

三、Viewport

1、Viewport 到底是什么？

我们在写H5页面的时候，通常会在 html 的 head 中加入下面这句话：

这句话就是在设置页面的 viewport 。那 viewport 到底是什么？为什么要设置它？

简单来说：viewport 是屏幕背后的一张画布。

下面，我们将逐个理解 viewport 中的每个概念。

2、Viewport 画布

浏览器会先把页面内容绘制到画布上，然后再通过屏幕窗口呈现出来。

画布的宽度可大可小, 当画布的宽度大于屏幕宽度时，画布上的内容就无法通过屏幕全部展示出来，用户可以通过屏幕手势来拖动画布查看被遮挡的部分。

如果没有在 html 中加 viewport 的设置，画布其实也是存在的，浏览器会给画布设置一个默认宽度 ，不同平台的默认值如下：

画布的宽度可以通过 DOM API 来获取：

3、device-width 指的是什么？

device-width 指屏幕可视窗口在水平方向上的逻辑像素。

device-width 的大小可以通过 window.screen.width 来获取：

4、width=device-width 在设置谁的宽度？

width 指的是画布的宽度，device-width 是可视窗口宽度。

width=device-width 就是把画布的宽度设置为可视窗口的宽度，让画布上的内容完全呈现出来。

设置了 width=device-width 之后，画布的宽度就和屏幕的宽度一样大了。

5、画布缩放 scale

scale 是指画布以 device-width 大小为基准的缩放值。

initial-scale=1.0 也就相当于设置了 width=device-width

通常需要同时设置这两个值，这是因为两者在不同平台有兼容性问题：

在iPhone 和 iPad 上，只支持 inital-scale=1 的设置，而在 IE 只支持 width=device-width ，所以两者同时设置，可以兼容所有的平台。

6、动态缩放机制

在没有给页面设置 viewport 的情况下，当画布宽度大于可视窗口的时候，浏览器会自动对画布进行缩放，以适配可视窗口大小。这样页面在不滚动的情况下也能呈现全部内容。

下面这个页面是PC端页面，没有做移动端适配，可以看出网页的内容依然可以完全呈现出来，这是因为没有设置 viewport 而触发了 画布的动态缩放机制。

通过 DOM API 能计算出浏览器确实对画布进行了缩放：

需要注意的是：

当没有设置 viewport 或者 设置了viewport 但没有设置 scale 的时候，才会触发浏览器动态缩放机制。

7、禁止动态缩放

给页面添加 viewport 设置，如下所示：

由于手动设置了 scale 的值，没有触发自动缩放机制，浏览器直接把宽度为 980px 的画布原封不动的展示出来了：

这种情况下需要通过滚动才能查看画布全部内容。

8、三个 Viewport

通常，我们把画布称为 layout viewport, 把屏幕可视窗口称为 visual viewport。

而把设置 width=device-width 的画布称为 ideal viewport，即“理想视口”。

我们通常在 html 中设置 viewport 就是为了得到理想视口，方便用户阅览。

四、响应式布局方案

响应式布局的目标是：用同一套代码适配所有的设备。

常用的布局方案有以下几种：

• 百分比

• vw

• Css Media Query

• rem

• flex box

下面是手淘团队移动端适配的协作模式：

设计师一般会把 iPhone6（750px） 作为设计稿，设计稿中的元素也都是基于750px进行标注的，当然这里的 px 指的是物理像素。

开发拿到设计稿后，根据iPhone6的 dpr 把标注中的元素大小换算成 css 中的大小，比如设计稿中按钮的宽度标注为40px, 则 css 中应该写成40/2=20px

然后再根据屏幕的逻辑宽度进行同步缩放（如：rem/vw 方案），就可以实现向上或向下适配所有设备。

五、总结

最后，我们再回顾一下开篇提到的问题，其实不难理解，这是由于屏幕的 dpr 不同导致的。

一般情况下，PC 屏幕 dpr 是 1，即 1个逻辑像素 = 1个物理像素，而移动端的 dpr 通常都是 2 或 3，因此也就需要 2个或 3个物理像素来渲染。

这也是 “移动端1px边框” 的经典问题，理解了 viewport，这个问题就不难解决了。

原创发布  @一像素   2020.01.03