viewport meta标签必须写对且置于head顶部，否则所有适配失效；srcset需配合sizes才能实现高DPR屏幕清晰显示。
核心就一条：viewport meta 标签写错，后面所有适配都是白忙——它不是“锦上添花”，是现代 Web 渲染的硬性开关。
viewport meta 标签必须写对且放对位置
几乎所有移动端显示异常（文字极小、横向滚动、按钮点不中）都源于这行缺失或拼错：<meta name="viewport" content="width=device-width, initial-scale=1">
-
width=device-width必须拼写准确，写成device_width或width=deviceWidth就完全失效 - 别加
maximum-scale=1或user-scalable=no，除非是自助终端（Kiosk）场景；否则直接违反 WCAG 可访问性要求 - 该标签必须放在
<head>最顶部，早于任何 CSS/JS；否则 iOS Safari 可能先按桌面宽度渲染再重排，造成闪屏 - 旧版 UC、QQ 浏览器对
initial-scale解析不稳定，所以不能依赖它做 JS 布局计算（比如用window.devicePixelRatio算 rem）
img 标签的 srcset 和 sizes 是分辨率感知的关键属性
仅靠 max-width: 100% 无法解决高 DPR 屏幕下的模糊问题；浏览器需要明确知道“这张图在当前视口下应该多宽”以及“有哪些分辨率版本可选”。
-
srcset列出不同物理分辨率的图源，如"logo-1x.png 1x, logo-2x.png 2x"或"360.jpg 360w, 768.jpg 768w" -
sizes必须配套使用（尤其带w描述符时），例如sizes="(max-width: 768px) 100vw, 50vw"，告诉浏览器在不同视口宽度下图片的**布局宽度** - 最后一个
src是降级 fallback：当浏览器不支持srcset时，直接加载它 - iPhone 4（DPR=2）下即使视口只有 320px，浏览器也会选 768w 图片——因为它是“逻辑像素 × DPR”的结果，不是瞎猜
HTML 元素自身不提供分辨率适配能力，但能通过 class 触发响应式行为
HTML 标签没有内置“自动适配分辨率”的属性，所谓“适配”本质是 CSS 通过媒体查询、单位（rem/vw）、布局模型（flex/grid）响应 HTML 结构变化。但你可以用 class 作为钩子：
立即学习“前端免费学习笔记（深入）”；
- 给
<body>动态加 class，如body.dpr-2或body.screen-lg，然后在 CSS 中写.dpr-2 img { image-rendering: -webkit-optimize-contrast; } - Element UI 的
<el-row>和<el-col :span="24">这类组件，其响应式能力依赖内部 class（如el-col-xs-24）被框架注入，不是 HTML 原生属性驱动 - 不要试图用
screen.width跳转到1920.html这类方案——它查的是设备物理分辨率，而实际布局应基于视口宽度（window.innerWidth）和 CSS 媒体查询
真正容易被忽略的点：viewport 错误会导致后续所有 CSS 单位（vw、rem、媒体查询断点）全部失准；而 srcset 缺少 sizes 会让高 DPR 设备加载低质图却浑然不觉——这两处一旦漏掉，调试成本远高于初期写对。
