# Viewport 与移动端

URL: https://caijiao.org/html/10-meta/02-viewport
Source: docs/html/10-meta/02-viewport.md
Description: viewport 是移动端网页设计的核心，通过 标签控制页面在不同设备上的缩放和布局行为，实现响应式设计。

在移动设备上浏览网页时，页面的布局和缩放行为由 **viewport（视口）** 控制。合理设置 viewport 可以让网页在手机、平板等设备上正确显示，提升用户体验。

## 什么是 Viewport？

Viewport 是浏览器用来显示网页内容的区域。桌面端的 viewport 大小固定为浏览器窗口宽度，而在移动设备上，默认 viewport 宽度比设备屏幕宽，页面会被缩小整体显示。

## 默认行为的问题

如果不设置 viewport，移动设备会以大约 **980px 的宽度**来渲染页面，导致内容缩小、文字变小，需要手动放大缩小，体验不佳。

## 设置 Viewport 的语法

最常见的 viewport 设置如下：

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

### 属性解释：

- `width=device-width`：视口宽度等于设备的屏幕宽度。
- `initial-scale=1.0`：初始缩放比例为 1，即页面按正常比例显示。

## 可选参数

| 属性          | 含义                              |
| ------------- | --------------------------------- |
| width         | 设置视口宽度，常用 `device-width` |
| initial-scale | 初始缩放比例，如 `1.0`            |
| maximum-scale | 最大缩放比例                      |
| minimum-scale | 最小缩放比例                      |
| user-scalable | 是否允许用户缩放（yes/no）        |

示例：

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

> 上述设置禁止了用户手动缩放页面，适用于某些固定布局的应用场景，但需慎用以保证可访问性。

## 移动优先的开发理念

配合媒体查询（Media Queries），可以实现**响应式网页设计**，根据不同设备尺寸调整排版样式，是现代网页开发的主流方法。

## 小结

- Viewport 决定了页面在移动设备上的呈现方式。
- 设置 `<meta name="viewport">` 是构建响应式网页的第一步。
- 搭配 CSS 媒体查询，可实现良好的跨设备兼容性。

合理设置 viewport 是移动端网页开发的核心步骤之一，直接影响页面的可用性与用户体验。