<meta name="viewport" content="width=device-width, initial-scale=1.0"> 是一个 HTML 元标签，在响应式网页设计中起着关键作用，下面为你详细解释其各个部分：
<meta> 标签概述
<meta> 标签用于提供关于 HTML 文档的元数据，这些元数据不会显示在页面上，但会被浏览器、搜索引擎和其他 Web 服务使用。它通常位于 HTML 文档的 <head> 部分。
name="viewport"
name 属性指定了元数据的名称，viewport 是一个特殊的元数据名称，用于控制页面在移动设备上的布局和显示。视口（viewport）指的是浏览器中实际显示页面内容的区域，在移动设备上，视口的大小通常与设备屏幕的大小不同。
content="width=device-width, initial-scale=1.0"
content 属性用于提供与 name 属性对应的具体值，这里包含两个关键参数：
-
width=device-width：将视口的宽度设置为设备的宽度。在不同的移动设备上，屏幕宽度各不相同，使用device-width可以确保页面在各种设备上都能以合适的宽度显示，避免页面在小屏幕设备上出现横向滚动条。 -
initial-scale=1.0：设置页面的初始缩放比例为 1.0，即不进行缩放。用户可以根据需要手动缩放页面，但初始状态下页面将以 1:1 的比例显示，保证页面内容在设备上正常展示。
示例代码
以下是一个包含该视口元标签的完整 HTML 示例：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Page</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
</style>
</head>
<body>
<h1>Responsive Web Design</h1>
<p>This is an example of a responsive web page.</p>
</body>
</html>在这个示例中，由于设置了视口元标签，页面在不同设备上都能以合适的宽度和缩放比例显示，提供了更好的用户体验。