什么是 HTML 中的视口？

要点速览

简而言之：HTML 中的视口是网页在用户屏幕上的可见区域。它的大小随设备而变化，手机的视口比台式机显示器的视口小。开发者通过 HTML 文档 <head> 中的 <meta name=”viewport”> 标签来控制视口。

什么是视口？

视口是构建适配所有设备的网站时的一个重要概念。如果缺少必要的视口标签，您的网页在不同设备上可能无法正常显示。在 ProxyWing，我们确保您的网页内容在各种屏幕尺寸上都能呈现良好的效果。

视口是网页在用户屏幕上可见的部分。它会因浏览器、设备和显示屏的不同而变化。开发者可以通过 HTML 视口控制布局、内容和元素。网页设计师通过控制视口的宽度和高度，确保网站在最小的屏幕和大型台式机上都能呈现出色的效果。

视口对网页设计和 SEO 的重要性

视口对网页设计非常重要，因为它会影响尺寸以及单位的计算方式。正确设置视口可以确保可见区域满足页面布局的需要。合适的视口有助于网页内容在较小的设备和各种设备上正确加载，这对 SEO 有利。响应式网页更容易被搜索引擎发现，因为它们的排名更高。

<meta viewport> 标签详解

您可以使用 <meta viewport> 标签调整网页在不同设备上的适配方式。它有助于处理视觉视口、视口宽度和视口单位。通过合适的视口 meta 设置，您的网站可以轻松适应各种屏幕尺寸。这能提升网站在大屏幕和较小设备上的使用体验。

以下是大多数现代网页使用的标准视口 meta 标签：

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

这行代码放在 HTML 文档的 <head> 部分中。width=device-width 部分告诉浏览器让页面宽度与设备屏幕相匹配。initial-scale=1.0 部分将页面首次加载时的缩放级别设为 100%。如果没有这个标签，移动浏览器会以默认的桌面宽度（通常为 980 像素）渲染页面，然后缩小结果以适应屏幕。文字会变得太小而难以阅读，用户不得不缩放并横向滚动。

视口标签的常用属性

视口 meta 标签的 content 属性支持多个属性值。每个属性值控制页面在设备上显示方式的一个不同方面。

width：设置视口的宽度。最常用的值是 device-width，它与设备的屏幕宽度相匹配。width=600 这样的固定数值同样有效，但很少使用。

initial-scale：设置页面首次加载时的缩放级别。标准值为 1.0，表示不缩放。较低的值会缩小页面，较高的值会放大页面。

minimum-scale 和 maximum-scale：设置用户可以缩小和放大的程度。取值范围通常为 0.1 到 10.0。限制过严会损害无障碍访问。

user-scalable：控制用户能否双指缩放。将其设为 no 会禁止缩放，通常不建议这样做，因为这会让视力不佳的用户更难阅读页面。

典型的响应式设置只使用 width=device-width 和 initial-scale=1.0，并默认保留缩放功能。

移动设备上的 HTML 视口

视口标签在移动端最为重要。智能手机的屏幕宽度在 320 到 430 像素之间，而许多网站是按 1280 像素及以上的桌面宽度设计的。如果没有视口 meta 标签，移动浏览器会把完整的桌面布局缩小到屏幕大小，结果是内容根本无法阅读。

设置 width=device-width 只需一行代码即可解决这个问题。浏览器会使用手机的实际宽度，页面的 CSS 随后可以通过媒体查询、流式网格或 vw 和 vh 等现代视口单位做出响应。

Google 采用移动优先索引，即使用页面的移动版本来确定其在搜索结果中的排名。缺少视口标签或视口标签有误，是页面未能通过 Google 移动设备易用性检查的最常见原因之一。

视口单位：vw、vh、vmin、vmax

现代 CSS 包含四种相对于视口确定大小的单位。当元素需要随屏幕缩放、而不是保持固定像素大小时，这些单位非常有用。

• vw（视口宽度）：1vw 等于视口宽度的 1%。设置了 font-size: 5vw 的标题在宽屏上会变大，在窄屏上会变小。
• vh（视口高度）：1vh 等于视口高度的 1%。设置了 height: 100vh 的首屏区域无论在什么设备上都会填满整个可见区域。
• vmin：宽度和高度中较小一边的 1%。
• vmax：宽度和高度中较大一边的 1%。

这些单位依赖于正确设置的视口 meta 标签。在没有 width=device-width 的页面上，报告给 CSS 的视口是默认的桌面宽度，这些单位也就不再与用户实际看到的内容相符。

常见问题

HTML 中的视口是什么意思？

HTML 中的视口是指网页当前在用户浏览器窗口中可见的部分。它与整个页面不同：页面可能超出视口范围，用户需要滚动才能看到其余内容。

视口 meta 标签有什么作用？

视口 meta 标签告诉浏览器如何在当前设备上设置页面的尺寸和缩放比例。要让响应式布局在手机和平板电脑上正常工作，就必须使用它。

默认视口大小是多少？

如果没有视口 meta 标签，大多数移动浏览器默认使用约 980 像素的视口宽度，然后将结果缩小到屏幕大小。这就是为什么没有该标签的页面在手机上看起来像是被缩小了。

视口 meta 标签是必需的吗？

HTML 规范并未要求必须使用它，但实际上，任何需要在移动设备上正常运行的网站都离不开它。没有该标签的页面会被 Google 标记为不适合移动设备。

视口宽度和屏幕宽度有什么区别？

屏幕宽度是设备的物理像素宽度。视口宽度是浏览器报告给 CSS 的宽度；设置 width=device-width 后，这两个值会保持一致。