视口元标签
添加视口元标签，并了解它为何是移动设备正确实现响应式布局所必需的。
视口元标签 是 CoddyKit 上的免费 Frontend Academy 课时。 这是第 1 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Frontend Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Frontend Academy 课程共包含 4 节课。
为什么需要视口元标签
如果没有视口元标签，移动浏览器会以桌面宽度（通常为 980px）渲染页面，然后缩小页面以适应屏幕。这会导致文字过小、布局错乱。元标签会告诉浏览器使用设备的实际宽度。
该标签
请将此标签添加到每个页面的 <head> 内。任何响应式设计要正常工作，都必须添加它。
<meta name="viewport" content="width=device-width, initial-scale=1.0">width=device-width
width=device-width 会将视口宽度设置为设备屏幕的 CSS 像素宽度。在宽度为 390px 的 iPhone 14 上，视口宽度会是 390px，而不是 980px。
initial-scale=1.0
initial-scale=1.0 会将页面首次加载时的缩放级别设置为 1。如果没有它，某些浏览器仍可能应用缩放因子。它与设备宽度设置结合使用，可以提供真正的 CSS 像素与设备像素 1:1 的比例。
CSS 像素与物理像素
高 DPI（视网膜）屏幕的设备像素比（DPR）大于 1。宽度为 390px 的 iPhone 14 有 1170 个物理像素（DPR = 3）。CSS 像素对物理像素进行了抽象——无论 DPR 为多少，您的 CSS 都使用 CSS 像素正常工作。
不要使用 user-scalable=no
有些开发者会添加 user-scalable=no 来禁用双指缩放。请不要这样做。它会阻止视力障碍用户放大内容进行阅读，并且不符合 WCAG 成功标准 1.4.4。
视口单位：vw 与 vh
1vw = 视口宽度的 1%。1vh = 视口高度的 1%。100vw 和 100vh 会填满整个视口。您可以将它们用于主视觉区域和全屏布局。
.hero {
width: 100vw;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}dvh——动态视口高度
在移动设备上，100vh 包含浏览器界面（地址栏）的高度，这可能导致内容被截断。较新的 100dvh（动态视口高度）会根据可见的浏览器界面进行调整。请结合 fallback 使用。
.full-screen {
min-height: 100vh; /* fallback */
min-height: 100dvh; /* modern browsers */
}DevTools 中的视口
在 Chrome DevTools 中，点击设备图标进入设备模式，即可准确查看页面在不同视口尺寸下的显示效果。标尺显示的是 CSS 像素。
content 属性的变化形式
您还可以设置 initial-scale、minimum-scale 和 maximum-scale。请将它们保持在合理范围内。在不设置 user-scalable=no 的情况下将 minimum-scale=1，可以继续允许缩放，这是更具可访问性的做法。
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">视口与媒体查询
媒体查询使用视口宽度（CSS 像素值，而不是物理像素）。如果视口宽度为 390px，@media (max-width: 768px) 就会匹配。视口元标签可以让这些断点在移动设备上正常工作。
快速检查
视口元标签中的 width=device-width 有什么作用？
回顾：视口元标签
始终在
中包含 。绝不要禁用用户缩放。使用 vw/vh 设置相对于视口的尺寸。dvh 可以解决移动浏览器界面导致的问题。这个标签让所有响应式 CSS 都能在移动设备上正常工作。常见问题解答
「视口元标签」课时是免费的吗？
是的 — 「视口元标签」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Frontend Academy 课程的其余内容，请升级到 CoddyKit PRO。 Frontend Academy 课程共包含 4 节课。
「视口元标签」这节课中我会学到什么？
添加视口元标签，并了解它为何是移动设备正确实现响应式布局所必需的。 你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Frontend Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Frontend Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 4 节。
「视口元标签」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Frontend Academy 课中编写并运行代码吗？
能。每节 Frontend Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。