viewport 的 width=device-width 和 initial-scale=1.0 必须同时存在，缺一不可；单独设置 width=device-width 会导致 iOS Safari 默认放大、安卓忽略缩放逻辑，且 DevTools 模拟失效。
viewport 的 initial-scale 和 device-width 必须同时存在
只写 width=device-width 不加 initial-scale=1.0，iOS Safari 会默认放大 1.25 倍，Android 浏览器可能直接忽略缩放逻辑，PC 端用 DevTools 模拟时也会失效。这不是兼容性“建议”，而是硬性要求。
常见错误是把 viewport 写成：<meta name="viewport" content="width=device-width"> —— 缺少 initial-scale 就等于没设。
- 必须写成：
<meta name="viewport" content="width=device-width, initial-scale=1.0"> - 避免
user-scalable=no：它会禁用双指缩放，对视力障碍用户不友好，且在高DPI屏上反而加剧文字不可读问题 - 不要用
target-densitydpi：该属性仅 Android Browser 支持，Chrome、Edge、Safari 已完全废弃，写了也无效
CSS 中用 rem + 动态 html font-size 替代 px
px 在高 DPI 屏上固定像素输出，不随系统缩放变化，导致文字过小或模糊；em 又依赖嵌套层级，计算不可控。rem 是唯一稳定锚点，但必须配合 JS 动态设置根字体大小，否则只是“伪响应式”。
典型做法是以设计稿宽度（如 375px）为基准，按比例缩放：document.documentElement.style.fontSize = document.documentElement.clientWidth / 37.5 + 'px';
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- iOS Safari 横竖屏切换时可能不触发
resize，需额外监听orientationchange - 若用现代框架（如 Vue/React），推荐封装为自执行函数或在
useEffect/onMounted中调用，避免重复执行 - 慎用
clamp()直接替代 rem：它虽能限制范围，但无法响应系统级字号缩放（如 Windows “放大文本”设置）
@media 查询要匹配 min-resolution 而非仅 width
只靠 max-width: 768px 匹配平板，会漏掉高 DPI 的小屏设备（如 Pixel 7、iPhone 14 Pro）。真正决定渲染清晰度的是设备像素比（dpr）和分辨率密度（dpi）。
正确写法是组合使用：
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
body { font-size: 18px; }
.icon { background-image: url(icon@2x.png); background-size: contain; }
}
-
min-resolution: 192dpi对应 dpr ≥ 2，覆盖绝大多数 Retina/4K 屏 - 务必提供
@2x或@3x图片资源，并确保background-size: contain或cover配合使用，否则高清图会被拉伸失真 - 不要在媒体查询里写死
device-width：它返回的是设备独立像素（DIP），不是 CSS 像素，DevTools 模拟结果与真机常不一致
浏览器进程级 DPI 行为不能靠前端代码绕过
HTML/CSS/JS 无法控制浏览器自身如何渲染 UI 元素（地址栏、右键菜单、开发者工具面板）。如果外接 4K 显示器后，VS Code 或 Chrome 的界面错位、按钮模糊，问题不在你的页面代码，而在操作系统对进程的 DPI 缩放策略。
这类问题只能从系统或启动参数干预：
- 右键浏览器快捷方式 → 属性 → 兼容性 → 更改高 DPI 设置 → 勾选“替代高 DPI 缩放行为”，下拉选“系统(增强)”
- 启动 Chrome 时加参数：
--force-device-scale-factor=1.25（数值按实际缩放比例调整） - 统一主副显示器缩放比例（如都设为 125%），混用 100% 和 150% 是多数错位问题的根源
前端能做的只是让页面内容适配——但浏览器外壳、工具栏、弹出菜单这些，永远由宿主进程和 OS 控制。这点容易被忽略，却决定了用户第一眼是否觉得“这个网页很糊”。
