{{CSSRef}}
-这篇文章阐述了视口 (viewport) 的概念，对 visual viewport 和 布局视口 (layout viewport) 进行区分，并让你了解 viewport 的意义是什么，以及它对 CSS, SVG 和移动设备方面的影响。
+这篇文章阐述了视口 (viewport) 的概念，对 视觉视口 (visual viewport) 和 布局视口 (layout viewport) 进行区分，并让你了解 viewport 的意义是什么，以及它对 CSS, SVG 和移动设备方面的影响。
在实测中，innerWidth 和 outerWidth 是相同的，但是 outerHeight 比 innerHeight 高100px。这是因为 outerHeight 的测量包括浏览器框架在内，包括了地址栏和书签栏总共 100px 的高度，而浏览器没有左右边框。
innerHeight 和 innerWidth 所组成的区域通常被认为是布局视口(layout viewport) 。浏览器的框架不被认为是 viewport 的一部分.
innerHeight 和 innerWidth 所组成的区域通常被认为是布局视口 (layout viewport)。浏览器的框架不被认为是 viewport 的一部分。
当缩放时， Firefox 和 Chrome 对 innerWidth 和 clientWidth 给出了新的 CSS 像素大小。浏览器对 outerWidth 和 outerHeight 的返回值有差异。Firefox 返回了缩放后的 CSS 像素值，Chrome 返回了默认的像素值：
Web 浏览器包含两个 viewport，布局视口 (layout viewport) 和视觉视口 (visual viewport)。visual viewport 指当前浏览器中可见的部分，并且可以变化。当使用触屏双指缩放，当动态键盘在手机上弹出的时候，或者之前隐藏的地址栏变得可见的时候，visual viewport 缩小了，但是 layout viewport 却保持不变。
-我们上面说到的固定的头部和尾部，固定在 layout viewport 的底部和顶部，所以当 visual viewport 缩小的时候,保留在视觉中。当你缩放页面时，布局视口可能不能被全部看到。如果你放大布局视口的中间部分，内容将在四个方向上扩展。如果你有一个固定的头部和底部，它们依然固定在布局视口的顶部和底部，因此它们可能会在设备屏幕的底部和顶部不可见-视觉视口。视觉视口是布局视口当前的可见部分如果你向下滚动，视觉视口的内容就会改变，并布局视口的底部就会滚动到可视区域。
+我们上面说到的固定的头部和尾部，固定在 layout viewport 的底部和顶部，所以当 visual viewport 缩小的时候,头部和尾部仍保留在视觉中。当你缩放页面时，布局视口可能不能被全部看到。如果你放大布局视口的中间部分，内容将在四个方向上扩展。如果你有一个固定的头部和底部，它们依然固定在布局视口的顶部和底部，因此它们可能会在设备屏幕的底部和顶部不可见-视觉视口。视觉视口是布局视口当前的可见部分如果你向下滚动，视觉视口的内容就会改变，并布局视口的底部就会滚动到可视区域。
视觉视口是屏幕的可视部分，不包括屏幕键盘，缩放外的区域。视觉视口比布局视口相同或者更小
@@ -83,7 +83,7 @@ body > footer {在上面描述的布局视口(layout viewport)和视觉视口(visual viewport)不是您将遇到的唯一视口。 在布局视口中完全或部分显示的任何子视口都被视为可视视口。
+在上面描述的布局视口 (layout viewport) 和视觉视口 (visual viewport) 不是您将遇到的唯一视口。 在布局视口中完全或部分显示的任何子视口都被视为可视视口。
我们通常认为宽度和高度的媒体查询是相对于浏览器窗口的宽度和高度而言的。 它们实际上是相对于视口的，即主文档（document）中的窗口（window对象），但它也是嵌套浏览上下文（如对象，iframe和SVG）中元素父级的本身的大小。 在CSS中，我们也有基于视口大小的长度单位。 1vh单位是1%布局视口的高度，vw单位与此类似。
@@ -91,18 +91,18 @@ body > footer {对于一个 iframe 来说，视觉视口是其内部高度和宽度的大小而不是其父文档的大小。你可以为其高度和宽度设置任意数值，但过大的值可能会使 iframe 部分内容超出视口导致超出部分不可见。
在 CSS 中，可以使用相对于视口的长度单位 vh 和 vw。 1vh 意味着值为视口高度的1%，同理 1vw 即值为视口宽度的1%。
在 CSS 中，可以使用相对于视口的长度单位 vh 和 vw。 1vh 意味着值为视口高度的 1%，同理 1vw 即值为视口宽度的 1%。
需要注意的是，当你在 CSS 中使用 vw 和 vh 设置 iframe 的样式时，1vh 表示的是 iframe 高度的1%，但 1vw 表示的则是 document 宽度的 1%。
需要注意的是，当你在 CSS 中使用 vw 和 vh 设置 iframe 的样式时，1vh 表示的是 iframe 高度的 1%，但 1vw 表示的则是 document 宽度的 1%。
iframe {
width: 50vw;
}
-在上面的例子中，一个 iframe 宽度被设置为 50vw，假设父文档宽度为 1200px，按照上面的规则，它的的实际宽度将会是父文档宽度的 50%，即 600px。在这个例子中，每 1 vw 将折算 6px。如果因为缩放，父文档宽度变为 800px，则 1vw 将代表4px，iframe 的宽度将会是 400px。
+在上面的例子中，一个 iframe 宽度被设置为 50vw，假设父文档宽度为 1200px，按照上面的规则，它的的实际宽度将会是父文档宽度的 50%，即 600px。在这个例子中，每 1vw 将折算 6px。如果因为缩放，父文档宽度变为 800px，则 1vw 将代表 4px，iframe 的宽度将会是 400px。
此外，一个在 iframe 文档内基于宽度的媒体查询将会使用 iframe 的视口宽度进行参照。
+此外，一个在 iframe 文档内基于宽度的媒体查询将会使用 iframe 的视口宽度进行参照。
@media screen and (min-width: 500px) {
p {
@@ -110,7 +110,7 @@ body > footer {
}
}
-如果上述 CSS 代码块包含于一个 iframe 所指向的一个文档头部，那么当用户放大该文档时，p 标签颜色将变红；当用户不使用缩放时，该样式则不会被应用。
+如果上述 CSS 代码块包含于一个 iframe 所指向的一个文档头部，那么当用户放大该文档时，p 标签颜色将变红；当用户不使用缩放时，该样式则不会被应用。
如果开发者想让移动端浏览器使用屏幕宽度作为视口替换默认的 980px 宽度视口，则可以在 HTML 的头部添加以下标签：
-<meta name="viewport" content="width=device-width"><meta name="viewport" content="width=device-width">-
这里 width 属性指的是视口宽度，现在视口的宽度被设置为了设备的屏幕宽度，即文档视口宽度大小与设备宽度大小 100% 对应（转换为 CSS 像素值相同）。除了 width 属性外，还有initial-scale、maximum-scale、minimum-scale，以及 user-scalable 属性可供设置。这些属性分别设置了文档的初始缩放比例、最大缩放比例、最小缩放比例以及是否允许用户进行缩放操作。但这些属性的默认值已经很好了，开发时可以忽略掉这些属性。
这里 width 属性指的是视口宽度，现在视口的宽度被设置为了设备的屏幕宽度，即文档视口宽度大小与设备宽度大小 100% 对应（转换为 CSS 像素值相同）。除了 width 属性外，还有initial-scale、maximum-scale、minimum-scale，以及 user-scalable 属性可供设置。这些属性分别设置了文档的初始缩放比例、最大缩放比例、最小缩放比例以及是否允许用户进行缩放操作。但这些属性的默认值已经很好了，开发时可以忽略掉这些属性。
<meta name="viewport">