根本原因是viewport配置、css单位选择、dom渲染上下文未对齐；必须设viewport为width=device-width,initial-scale=1.0，用rem+js动态根字号，canvas和html-to-image需显式处理devicepixelratio。
高像素屏幕（如 4K、Retina）下 HTML 内容模糊，根本原因不是“缺缩放函数”，而是 viewport 配置、CSS 单位选择、DOM 渲染上下文三者没对齐。没有一个单独的“HTML 缩放函数”能兜底——强行用 transform: scale() 或 zoom 只会让文字锯齿、点击区域偏移、Canvas 绘图错位。
viewport 必须同时写 width=device-width 和 initial-scale=1.0
只写 <meta name="viewport" content="width=device-width"> 是无效的。iOS Safari 会自动放大 1.25 倍，Android 浏览器可能忽略缩放逻辑，DevTools 模拟也失效。必须写成：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
不加 initial-scale=1.0，等于没设 viewport。也不要加 maximum-scale=1.0 或 user-scalable=no，它们会破坏系统级字体缩放（比如 Windows “放大文本”设置），反而让高 DPI 屏用户更难读。
用 rem + JS 动态根字号，别信纯 CSS 的 clamp()
px 在高 DPI 下是硬编码像素，不随系统缩放变化；em 依赖嵌套层级，不可控；clamp() 虽能限范围，但无法响应操作系统级字号调整（如 Windows 设置里的“放大文本”）。真正可靠的是 rem + JS 动态计算：
- 在
或DOMContentLoaded里执行：document.documentElement.style.fontSize = document.documentElement.clientWidth / 37.5 + 'px';（以 375px 设计稿为基准） - 监听
resize和orientationchange，iOS 横竖屏切换有时不触发 resize - 若用 React/Vue，放在
useEffect或onMounted中，避免重复设置
Canvas 和 html-to-image 必须显式处理 devicePixelRatio
Canvas 默认只按 CSS 像素渲染，在 Retina 屏上直接变模糊；html-to-image 默认也不读取设备像素比，导出图会发虚。两者都得手动补偿：
- Canvas 初始化时：
const dpr = window.devicePixelRatio || 1;，然后设canvas.width = rect.width * dpr;、canvas.height = rect.height * dpr;，再用 CSS 把显示尺寸压回rect.width + 'px' -
html-to-image导出时显式传pixelRatio: window.devicePixelRatio，例如：toPng(element, { pixelRatio: window.devicePixelRatio }) - 漏掉
pixelRatio参数，toPng就默认用 1，4K 屏导出图就是半清晰度
CSS 媒体查询要盯住 min-resolution，不是 max-width
只靠 @media (max-width: 768px) 匹配平板，会漏掉 Pixel 7、iPhone 14 Pro 这类小屏但高 DPI 的设备。真正影响清晰度的是物理像素密度：
- 用
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)加载高清图标、加大字重 - 背景图用
background-image: url(icon@2x.png); background-size: contain;，确保高 DPI 下加载对应资源 - 避免用已废弃的
target-densitydpi，Chrome/Edge/Safari 全都不认
最关键的细节往往藏在 Canvas 的 ctx.scale(dpr, dpr) 和 html-to-image 的 pixelRatio 参数里——这两个地方不手动设，其他所有适配都会打折扣。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
