
# meta viewport 是做什么用的，怎么写？

用法

```html
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">
```

| 属性            | 值示例                  | 作用                                             |
| ------------- | -------------------- | ---------------------------------------------- |
| width         | device-width 或 600px | 设置视口的宽度。device-width 表示完美适配当前设备的屏幕宽度（最重要）。     |
| initial-scale | 1.0                  | 页面首次加载时的初始缩放比例。1.0 表示不缩放（1:1 显示）。              |
| minimum-scale | 1.0                  | 允许用户的最小缩放比例。                                   |
| maximum-scale | 1.0                  | 允许用户的最大缩放比例。                                   |
| user-scalable | yes 或 no             | 是否允许用户手动缩放（no 表示禁止）                            |
| viewport-fit  | cover 或 contain      | 设置视口的适应模式。cover 表示视口会完全覆盖页面，contain 表示视口会包含页面。 |

---

“meta viewport 是移动端适配的‘基石’，它的核心作用是告诉浏览器，当前页面的宽度应该以设备的物理宽度为基准，而不是以桌面端的 980px 默认宽度为基准。”

“在没有这个标签的时候，移动端浏览器会默认在一个虚拟的‘布局视口’（通常 980px）下渲染页面，然后把页面缩小塞进手机屏幕里，所以文字会变得特别小。

加上这个标签后，浏览器会采用‘理想视口’，让 CSS 像素与设备宽度匹配，这样 1px 在手机上显示的大小就正常了，我们才能顺利地写 rem、vw 等响应式布局。”


## 追问 viewport 和 CSS 像素、DPR 的关系


## 追问其他关键的 <meta> 标签
1. 字符编码（必备）
<meta charset="UTF-8">
确保页面不出现乱码，必须放在 <head> 的最顶部（在 <title> 之前）。

2. SEO 优化（针对 C 端项目）
<meta name="description" content="页面描述"> 和 <meta name="keywords" content="关键词">
虽然百度权重降低，但在社交媒体分享时，配合 OG 协议（Open Graph）可以控制分享出去的标题、描述和缩略图，这对运营非常重要。”

## 移动端 1px 边框问题

###  方案一：rem + 动态根字体
  1. 动态根字体：根据根字体大小
  2. rem 单位：根据根字体大小，计算元素的 rem 值
缺点
  问题： 边框问题：在移动端，1px 边框在手机上显示的大小是 1px，而不是 2px
  影响其他UI元素的显示效果

###  方案二：vw/vh 纯 CSS 方案（无 JS，更优雅）
直接写基于750px 设计稿的像素值，postcss 会自动将 px 转 vw。（375px->50vw;）

默认使用vw 单位, 将750 默认为设计稿宽度，计算元素的 vw 值
```css
..box {
  width: 375px;    /* 构建后自动转成 50vw */
  height: 200px;   /* 构建后自动转成 26.67vw */
  border: 1px solid #ccc; /* 构建后自动转成 0.133vw，自动适配 DPR */
}
```

在项目中配置 postcss-px-to-viewport，写 CSS 时直接写 px，构建工具自动转成 vw：
```js
// postcss.config.js
module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      viewportWidth: 750,   // 设计稿宽度
      unitPrecision: 5,     // 转换精度
      viewportUnit: 'vw',
      minPixelValue: 1,     // 小于 1px 不转换
    }
  }
}
```

### 方案三：基于 DPR 的缩放方案（适用于活动页/大屏展示）

原理：用 JS 获取 window.devicePixelRatio，动态缩放整个页面容器。

```js
 const designWidth = 750;
  const deviceWidth = document.documentElement.clientWidth;
  const scale = deviceWidth / designWidth;
  
  const app = document.getElementById('app');
  app.style.transform = `scale(${scale})`;
  app.style.transformOrigin = 'top left';
```


缺点： 整页缩放，滚动有问题

## canvas 中的dpr问题

1. 获取canvas 的 css 逻辑像素 以及dpr
2. 设置canvas 中的 canvas 容器尺寸为 css 逻辑像素 * dpr
3. 设置canvas 的scale 为 dpr(方便绘制的时候设置)


介绍 meta viewport 的常用属性及其对移动端页面视口和缩放的影响。

meta viewport 是做什么用的，怎么写？


# HTML

## HTML 语义化

语义化是使用能够表达内容含义的 HTML 标签来组织页面，例如用 `h1`-`h6` 表示标题、`p` 表示段落、`article` 表示文章、`main` 表示主要内容、`aside` 表示边栏、`nav` 表示导航。

语义化有两个主要作用：有利于搜索引擎理解页面内容，也便于人阅读和团队维护。

## HTML5 新增标签

- 文章结构：`header`、`main`、`footer`、`nav`、`section`、`article`、`figure`、`mark`。
- 多媒体和图形：`video`、`audio`、`svg`、`canvas`。
- 表单类型：`email`、`tel` 等。

## Canvas 与 SVG

Canvas 主要通过绘图上下文使用笔刷绘制二维图形；SVG 主要通过标签描述不规则的矢量图形。两者都可用于二维绘图。

SVG 的节点支持分层和事件处理，但节点过多时渲染可能变慢；Canvas 通常有更好的绘制性能，但代码组织更复杂，事件和分层能力需要额外处理或借助库实现。

## DOM 事件模型

事件传播先经过从上到下的捕获阶段，再经过从下到上的冒泡阶段。`addEventListener` 的第三个参数可以选择监听阶段，`event.stopPropagation()` 可以阻止事件继续捕获或冒泡。

## SEO

页面内部优化包括：设置合理的 `title`、`description`、`keywords`，使用语义化 HTML，为非装饰图片添加 `alt`，谨慎使用 `display: none` 隐藏重要内容，将重要内容放在 HTML 前部，并减少使用 `iframe`，因为搜索引擎通常无法直接抓取其中的内容。外部优化包括向各个搜索网站提交网站。

原笔记中的建议是：标题一般不超过 80 个字符，描述一般不超过 150 个字，关键词一般设置 3 个左右。

## 微格式

微格式是在已有、广泛采用的标准上建立的一组开放数据格式。它把语义嵌入 HTML，例如给链接增加 `rel="home page"` 等语义属性，使标签具备更明确的结构和含义。

## 替换元素与页面可见性

替换元素的内容不由 CSS 直接控制，原笔记列举了 `iframe`、`img`、`audio`、`video`。

页面可见性可以通过 `document.hidden` 和 `document.visibilityState` 判断。`visible` 表示页面处于当前激活标签且窗口未最小化；`hidden` 表示标签未激活或窗口被最小化；`prerender` 表示页面正在重新生成、用户暂时不可见。`visibilitychange` 事件用于监听状态变化。


整理 HTML 语义化、HTML5 标签、Canvas、SVG、DOM 事件与页面可见性等知识。

HTML学习笔记

meta viewport 是做什么用的，怎么写？

HTML 基础与语义化笔记