HTML元信息：charset和viewport在移动设备优化中的作用-CSDN博客

本文链接：https://blog.csdn.net/weixin_55982578/article/details/138489822

本文介绍了HTML中charset和viewport标签的作用，charset设置字符编码为UTF-8，viewport用于移动设备视口调整，确保网页在不同设备上自适应，提升用户浏览体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基本骨架

<!DOCTYPE html> <!-- 声明文档类型为 HTML -->
<html lang="en"> <!-- 指定文档语言为英语 -->
<head>
    <meta charset="UTF-8"> <!-- 设置字符编码为 UTF-8 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 设置移动设备视口 -->
    <title>Document</title> <!-- 设置文档标题 -->
</head>
<body>
    
</body>
</html>

代码

<meta charset="UTF-8"> <!-- 设置字符编码为 UTF-8 -->

在这段代码中：

标签用于提供关于网页的元信息。
charset=“UTF-8” 指定了字符编码为 UTF-8。

代码

<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 设置移动设备视口 -->

这段 HTML 代码是用来设置网页在移动设备上的视口（viewport）属性的。视口是指浏览器用来显示网页内容的区域。在移动设备上，由于屏幕尺寸和分辨率的差异，如果不做适配处理，网页可能会在移动设备上显示不正常，内容被缩小或者放大，导致用户体验不佳。

这里的标签用于提供关于网页的元信息，其中 name 属性用于指定元信息的名称，content 属性用于指定元信息的值。

在这段代码中：

name=“viewport” 指定了这个标签的名称是 viewport。
content=“width=device-width, initial-scale=1.0” 指定了视口的属性。
其中 width=device-width 表示网页的宽度应该与设备的宽度相等，
initial-scale=1.0 表示初始的缩放比例为 1.0，即不进行缩放。

HTML 基本骨架（二）