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

是什么

这是一个HTML元标签，用于设置网页在不同设备和屏幕尺寸下的呈现。`<meta name="viewport" content="...">` 元素定义了视口（Viewport），也就是浏览器窗口中内容的可视区域。content 属性包含了一系列的参数，它们的作用如下： - `width=device-width`: 定义视口宽度等于设备的实际宽度，确保页面自适应屏幕大小。 - `initial-scale=1.0`: 设置初始缩放比例为1.0，表示默认加载时的缩放级别。 - `maximum-scale=1.0`: 设置最大缩放比例为1.0，防止用户放大超出网页内容。 - `minimum-scale=1.0`: 设置最小缩放比例也为1.0，同样限制用户缩小查看。 - `user-scalable=no`: 禁止用户手动缩放，保证页面显示的一致性。这个设置对于响应式设计至关重要，确保网站在手机、平板电脑或桌面电脑上都能正确地显示，并提供良好的用户体验。

<meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">

这段代码是用于设置网页的字符编码、浏览器兼容性和视口的元信息。第一行 `<meta charset="UTF-8">` 设置了网页的字符编码为 UTF-8，以支持显示多种语言和字符。第二行 `<meta http-equiv="X-UA-Compatible" content="IE=edge">` 是用来指定浏览器使用何种版本的渲染模式。在这里，`IE=edge` 表示使用最新版本的 Internet Explorer 渲染引擎。第三行 `<meta name="viewport" content="width=device-width, initial-scale=1.0">` 是用于控制网页在移动设备上的显示效果。其中，`width=device-width` 表示网页的宽度与设备宽度相等，`initial-scale=1.0` 表示初始缩放级别为 1.0，即不进行缩放。这些 `<meta>` 元素通常被放置在网页的 `<head>` 标签内，用于提供关于网页的元信息，帮助浏览器正确解析和显示网页内容。

阅读全文

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