主题
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 是移动端网页开发的核心步骤之一，直接影响页面的可用性与用户体验。