一句话回答
meta viewport 标签的作用是让布局视口（layout viewport）的宽度等于设备的宽度，页面不再被浏览器整体缩小，移动端可以直接按 CSS 像素 1:1 渲染。不写它，手机浏览器会把网页当作 980px 宽的"桌面页"渲染，再等比缩放到屏幕大小。
原理：三种视口
移动端浏览器通常在一个比物理屏幕更宽的虚拟窗口中渲染页面，这个虚拟窗口就是 viewport。它的存在是为了让没做移动端适配的网页也能完整展示。理解原理的关键是分清三种视口：
| 视口 | 含义 | 默认值（典型） |
|---|---|---|
| 布局视口 layout viewport | 浏览器实际用来排版页面的窗口，CSS 以它为基准 | 约 980px（各浏览器 800–1024px 不等） |
| 视觉视口 visual viewport | 用户当前真实看到的那块区域，即屏幕大小 | 设备物理宽度（如 320/375/414 CSS px） |
| 理想视口 ideal viewport | 让布局视口等于设备宽度后页面"最合适"的尺寸 | 由设备决定，device-width 即指它 |
举个例子：iPhone 4 屏幕宽 320px，浏览器却用 980px 宽的布局视口渲染页面，然后把 980px 的内容等比缩小塞进 320px 的视觉视口——这就是当年打开网页字特别小的原因。320px 是可见视口（视觉视口）宽度，980px 是视窗视口（布局视口）宽度。
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 做的事：把布局视口的宽度设成理想视口（设备宽度），初始缩放为 1，于是 CSS 像素与设备独立像素一一对应，媒体查询 @media (max-width: 480px) 也能按真实屏幕宽度命中。
解析
Viewport 字面意思为视图窗口，在移动 web 开发中使用。表示将设备浏览器宽度虚拟成一个特定的值（或计算得出），这样利于移动 web 站点跨设备显示效果基本一致。
在移动端浏览器当中，存在着两种视口：一种是可见视口（设备大小），另一种是视窗视口（网页渲染宽度）。为了显示更多的内容，大多数浏览器会扩大自己的视窗视口——让 320px 的屏幕宽度容下 980px 甚至更宽的内容（将网页等比例缩小）。
一个标准 meta viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
常用属性值
| 属性 | 含义 |
|---|---|
width=device-width | 布局视口宽度等于设备宽度（最关键） |
initial-scale=1.0 | 初始缩放比例 |
maximum-scale / minimum-scale | 用户可缩放的最大 / 最小比例 |
user-scalable=no | 是否允许用户缩放（无障碍角度不建议禁用） |
viewport-fit=cover | iPhone 刘海屏需要，让 viewport 延伸到安全区外，配合 env(safe-area-inset-*) 使用 |
注意：
user-scalable=no/maximum-scale=1.0会禁用缩放，视力障碍用户无法放大页面，iOS Safari 早期还会因此忽略缩放设置；只为去掉 input 聚焦放大时不必禁用，改用font-size >= 16px即可。
进阶：viewport 单位与 DPR
CSS 里可以直接使用 viewport 单位做适配：
vw：视窗宽度的 1%vh：视窗高度的 1%vmin/vmax：取 vw / vh 中较小或较大的一个
与 DPR（devicePixelRatio）区分开：DPR 是物理像素 / CSS 像素的比值（Retina 屏为 2 或 3），影响的是图片清晰度与 1px 边框问题；viewport 宽度影响的是页面布局基准，两者是不同维度的事。
面试要点小结
- 不写 meta viewport：手机浏览器按约 980px 布局视口渲染再整体缩小，页面字小、布局是"桌面版"。
- 写了
width=device-width, initial-scale=1：布局视口 = 设备宽度，CSS 按真实屏幕宽排版，响应式布局的前提。 - 三种视口概念：布局视口（渲染基准）、视觉视口（用户所见）、理想视口（设备宽度）。
- 它是移动端 H5 适配的入口开关，不写它几乎所有移动端样式都会出问题。
来源整理自：我的有道云笔记
