移动浏览器上的 viewport-原创手记-慕课网

在阅读本文之前，先需要了解设备像素、设备独立像素、CSS-像素和桌面浏览器上的-viewport。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

相信写过移动网站页面的同学，都见过上面这句话，只要加上这句话，我们的网页便可以适配不同尺寸不同分辨率的移动设备。那么这句话的原理是什么呢？我们下面便详细介绍一下移动浏览器上 viewport 的作用。

移动浏览器上有三个 viewport，分别是 layout viewport，visual viewport，ideal viewport，每个 viewport 代表着不同的含义。不同的移动设备上，这三个 viewport 的尺寸也都不相同。我们一般只关心 viewport 的宽度，而不太关心 viewport 的高度。

layout viewport

layout viewport 是网页布局的区域，是 <html> 元素的父容器，对应着桌面浏览器的 viewport。document.documentElement.clientWidth 用来表示 layout viewport 水平方向能够展示的 CSS 像素。在手机上浏览宽大的网页 (这些网页没有采用响应式设计) 的时候，layout viewport 通常超出了手机屏幕的范围，你只能一次浏览网页的一个部分，然后通过手指滑动浏览其他部分。

webp

layout-viewport.jpg

visual viewport

visual viewport 就是通过手机屏幕能够看到的网页区域。

webp

visual-viewport.jpg

ideal viewport

ideal viewport 不是某个区域，它是设备独立像素。

画布和窗户

layout viewport 就像一块画布，网页上的元素就像画布上的画。visual viewport 就像一个窗户。我们站在窗户的一侧，通过窗户观看另一侧的画布上的画。画布的大小可以调整，当画布变大的时候，我们观察到的画的范围变小了(原来能看到画中的一张人脸，画布放大之后，只能看到一个眼睛了，但是这个眼睛的尺寸比原来大了)，当画布变小的时候，我们观察到的画的范围变多了。

layout viewport 有自己的物理尺寸，也就是在物理空间上占据的长度单位，单位是厘米、英寸等。layout viewport 还有自己的逻辑尺寸，也就是 CSS 的像素，单位是 px。逻辑尺寸和物理尺寸是没有关联的，当我们通过缩放来改变 layout viewport 的物理尺寸时候，layout viewport 的 CSS 像素是不会变化的。CSS 宽度为 980px 的 layout viewport，不管怎么缩放，它的 CSS 宽度永远是 980px。我们平时很少关心 layout viewport 的物理尺寸，更多时候只需要关心 layout viewport 的 CSS 像素。由于 layout viewport 是 <html> 元素的父容器，<html> 元素的默认宽度为 100%，所以 layout viewport 的 CSS 宽度，限定了网页中所有元素的 CSS 的宽度。

可以通过手动缩放来改变 layout viewport 的物理尺寸。当 layout viewport 物理尺寸变大的时候，就相当于画布变大了，虽然 layout viewport 的 CSS 像素不会发生变化，但是通过 visual viewport 能够观察到的 CSS 像素发生了变化。layout viewport 的物理尺寸越大，visual viewport 观察到的的 CSS 像素越少，相当于画布尺寸越大，我们通过窗户能够看到的画布的范围就越小。同理，layout viewport 的物理尺寸越小，visual viewport 的 CSS 像素越大。

设置 layout viewport 的 CSS 宽度

不同型号的设备上，layout viewport 的 CSS 宽度的默认值不一样，iphone6 上默认是 980px。通过设置 <meta name="viewport"> 标签的 width 属性可以设置 layout viewport 的 CSS 宽度。

<meta name="viewport" content="width=1000">

上面的代码设置了 layout viewport 的 CSS 宽度为 1000px。我们查看 document.documentElement.clientWidth 值为 1000。

<meta name="viewport" content="width=device-width">

上面的代码设置了 layout viewport 的 CSS 宽度为 ideal viewport 的宽度。

除了 width 属性，还可以通过 initial-scale 属性来设置 layout viewport 的 CSS 宽度。

<meta name="viewport" content="initial-scale=1.0">

上面代码设置了 layout viewport 的 CSS 宽度为 ideal viewport / 1 的宽度，也就是 ideal viewport 的宽度。

<meta name="viewport" content="initial-scale=2.0">

上面代码设置了 layout viewport 的 CSS 宽度为 ideal viewport / 2.0 的宽度，也就是 ideal viewport 一半的宽度。

<meta name="viewport" content="initial-scale=0.5">

上面代码设置了 layout viewport 的 CSS 宽度为 ideal viewport / 0.5 的宽度，也就是 ideal viewport 2 倍的宽度。

既然 width 和 initial-scale 都可以设置 layout viewport 的 CSS 宽度，那么当这两个属性同时指定不同的值，layout viewport 的宽度会根据哪个属性来设置呢？答案是 layout viewport 的宽度取较大的值。

<meta name="viewport" content="width=400, initial-scale=1.0">

上面的代码同时设置了 width 和 initial-scale 属性。如果是 iphone6 手机，它的 ideal viewport 值为 375px，因此 layout viewport 就等于 400px。如果是 iphone6 Plus 手机，它的 ideal viewport 值为 414px，因此 layout viewport 就等于 414px。

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

上面的代码，保证了在任何手机上，layout viewport 的 CSS 宽度都是该手机的 ideal viewport 的宽度。其实理论上只设置这两个属性中的一个，都可以达到这样的效果，之所以要两个属性一起指定，是因为有些手机的某种型号的浏览器上有一些 bug，只指定一个属性的时候，不能够正确设置 layout viewport 的 CSS 宽度。

visual viewport 的宽度

和 layout viewport 不一样，我们无法直接设置 visual viewport 的宽度，但是我们可以通过 <meta name="viewport"> 标签设置 layout viewport 的宽度，来间接影响 visual viewport 的宽度。

如果没有 <meta name="viewport"> 标签，那么 layout viewport 取默认值，在 iphone6 上是 980px，这时的 visual viewport 也是 980px，也就是说，整张网页的宽度正好占满手机屏幕的宽度。

如果为 <meta name="viewport"> 标签设置了 width 属性，但是没有设置 initial-scale 属性，这时 visual viewport 会尽量显示整张网页的内容，也就是说整张网页的宽度正好占满手机屏幕的宽度，因此不会显示滚动条。这里的整张网页的宽度，并不一定等于 layout viewport 的宽度，有可能大于 layout viewport。假如我们设置 <meta name="viewport" content="width=1000">，layout viewport 的宽度为 1000px，同时我们设置网页中的某个元素 width: 1500px;，那么 layout viiewport 的宽度并不会扩张，但是子元素会溢出，这时整张网页的宽度就是 1500px，visual viewport 的宽度也就是 1500px 了。但是 visual viewport 也不能无限扩大，它最大为手机屏幕物理像素的 2 倍。iphone6 的物理分辨率为 750 像素，因此 iphone6 的 visual viewport 最大为 1500px。假如我们设置某个元素为 width: 5000px;，或者设置 <meta name="viewport" content="width=5000">，在 iphone6 上 visual viewport 为 1500px，网页中超出 1500px 的部分会显示滚动条。

如果为 <meta name="viewport"> 标签设置了 initial-scale 属性，不管是否设置了 width 属性，visual viewport 的值都与 layout viewport 的值相同，也就是说整个 layout viewport 会占满手机屏幕。注意 layout viewport 并不一定等于整张网页的宽度。网页的宽度可以大于 layout viewport (通过设置某个子元素的 width 大于 layout viewport)，网页的宽度也可以小于 layout viewport (通过设置 <html> 元素的 width 小于 layout viewport)。但是如果不做特殊设置，网页的宽度默认与 layout viewport 的宽度是相等的 (<html> 元素的 width 默认为 100%)。

<meta name="viewport" content="initial-scale=1.0">

上面的代码，layout viewport、visual viewport、ideal viewport 的值相同，在 iphone6 上，都为 375px。

<meta name="viewport" content="initial-scale=2.0">

上面的代码，layout viewport、visual viewport 都等于 ideal viewport 的一半，在 iphone6 上，都为 187.5px。

<meta name="viewport" content="initial-scale=0.5">

上面的代码，layout viewport、visual viewport 都等于 ideal viewport 的 2 倍，在 iphone6 上，都为 750px。

禁止用于手动缩放

为了实现同一个网页在不同手机浏览器上有相同的呈现效果，我们必须统一三个 viewport。

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

通过上面的代码，我们便统一了 layout viewport 和 visual viewport，让它们都等于手机设备独立像素，也就是 ideal viewport 的值。

但是用户缩放网页可以改变 layout viewport 的大小，这样当用户手动缩放网页的时候，布局有可能会乱掉。因此我们可以通过 <meta name="viewport"> 标签的 user-scalable 属性来禁止用户手动缩放网页。

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

为了兼容不同移动设备的浏览器，我们最好再加上 maximum-scale 属性和 minimum-scale 属性。最终的 <meta name="viewport"> 标签也就是我们文章开头所展示的那样了。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

媒体查询

在移动浏览器上，媒体查询中的 width height，代表 layout viewport 的宽度和高度，也就是 document.documentElement.clientWidth 和 document.documentElement.clientHeight。

@media (min-width: 320px) {  body {    color: red;
  }
}

上面的代码表示，当 layout viewport >= 320px 的时候，字体颜色为红色。

在桌面浏览器上，媒体查询中的 device-width device-height，代表 ideal viewport 的宽度和高度，也就是 screen.width 和 screen.height。

@media (min-device-width: 320px) {  body {    color: red;
  }
}

上面的代码表示，当 ideal viewport >= 320px 的时候，字体颜色为红色。由于我们通常将三个 viewport 的值统一，所以一般我们在媒体查询的时候，只需要使用 width 和 height 就可以了。

作者：Karmack
链接：https://www.jianshu.com/p/e08ace36d840