什么是视口（Viewport）#

视口（Viewport）是浏览器中用于显示网页内容的区域。 它决定了网页能够使用多大的空间进行布局。简单理解：

• 屏幕（Screen）：设备的整个物理显示区域。
• 视口（Viewport）：浏览器提供给网页显示内容的区域。
• 网页（Document）：网页的完整内容，可能超出视口，需要滚动才能查看。

视口不等于整个屏幕，网页内容也不一定局限于视口高度。

视口的分类#

在移动端开发中，主要涉及两种视口。

例如：在手机浏览器中放大网页时，布局视口的宽度通常不变，而视觉视口会变小，因为用户只能看到网页的一部分。

CSS中的视口单位#

CSS提供了基于视口大小计算的长度单位。

例如：

1
.box {
2
  width: 50vw;       /* 视口宽度的50% */
3
  height: 30vh;      /* 视口高度的30% */
4
}
5

6
.container {
7
  min-height: 100dvh; /* 适应移动端动态视口 */
8
}

假设视口为 1200 × 800 CSS像素，那么 50vw = 600px，30vh = 240px。

注意：vw 和 vh 是相对于视口计算的，不是相对于父元素计算的。另外，移动端浏览器地址栏显示、隐藏时，dvh 比传统 vh 更适合需要跟随可见区域变化的全屏布局。

使用meta标签设置#

在HTML文档的 <head> 中，通过 meta 标签配置移动端视口。

1
<meta
2
  name="viewport"
3
  content="width=device-width, initial-scale=1.0"
4
/>

这是现代响应式网页最常用的视口配置。

属性解释：

通常只需要前两个配置，不建议使用 user-scalable=no 限制缩放，因为这可能影响需要放大网页的用户。

为什么要设置viewport？#

早期移动端浏览器为了兼容PC网页，会使用一个较宽的默认布局视口（常见约980 CSS像素），然后把整张网页缩小显示。因此，如果没有正确配置Viewport，可能会导致：

• 网页在手机上整体缩小。
• 文字和按钮过小。
• 响应式媒体查询无法按照预期工作。

设置之后，网页就能按照设备对应的CSS像素宽度正常布局。

完整HTML示例#

1
<!doctype html>
2
<html lang="zh-CN">
3
  <head>
4
    <meta charset="UTF-8" />
5

6
    <meta
7
      name="viewport"
8
      content="width=device-width, initial-scale=1.0"
9
    />
10

11
    <title>Viewport示例</title>
12

13
    <style>
14
      .box {
15
        width: 50vw;
16
        height: 200px;
17
        background-color: skyblue;
18
      }
19

20
      @media (max-width: 768px) {
21
        .box {
22
          width: 100%;
23
        }
24
      }
25
    </style>
26
  </head>
27

28
  <body>
29
    <div class="box"></div>
30
  </body>
31
</html>

效果：

• 视口宽度大于768px时，盒子宽度为视口的50%。
• 视口宽度小于或等于768px时，盒子宽度为父元素内容区域的100%。

注意：meta viewport 属于HTML配置，不是CSS属性，但它会直接影响CSS响应式布局的表现。

window.innerWidth / innerHeight#

获取浏览器布局视口的宽度和高度。

1
// 获取视口宽度
2
const width = window.innerWidth;
3

4
// 获取视口高度
5
const height = window.innerHeight;
6

7
console.log(width, height);

innerWidth 和 innerHeight 包含视口内可能存在的滚动条所占空间。

document.documentElement.clientWidth / clientHeight#

获取HTML根元素的可见内容区域尺寸。

1
const width = document.documentElement.clientWidth;
2
const height = document.documentElement.clientHeight;
3

4
console.log(width, height);

与 innerWidth 的主要区别是：clientWidth 通常不包括传统滚动条占用的宽度。

window.visualViewport#

获取当前视觉视口尺寸，在移动端缩放等场景下尤其有用。

1
const width = window.visualViewport.width;
2
const height = window.visualViewport.height;
3

4
console.log(width, height);

其中 visualViewport 的 width 和 height 可以随着页面缩放、可见区域变化而改变。

监听视口大小变化#

使用 resize 事件，在浏览器窗口大小发生变化时执行代码。

1
window.addEventListener("resize", () => {
2
  console.log("视口宽度:", window.innerWidth);
3
  console.log("视口高度:", window.innerHeight);
4
});

如果需要监听移动端视觉视口变化：

1
window.visualViewport?.addEventListener("resize", () => {
2
  console.log(window.visualViewport.width);
3
  console.log(window.visualViewport.height);
4
});

常见获取方式对比#