HTML怎么做Retina高清屏适配

许多开发者在进行Retina适配时，仅简单为图片添加srcset属性，但在实际项目中会发现隐藏的坑远比预想多。核心问题始终是逻辑像素（CSS像素）与物理像素不匹配：仅调整显示尺寸而不修改渲染缓冲区，图片必然模糊；仅替换高清图片而不处理canvas或背景图的缩放逻辑，同样会导致显示虚化。

canvas在Retina屏上模糊？原因在于DOM属性与CSS尺寸不一致

canvas渲染模糊的常见原因是仅设置了canvas.style.width和canvas.style.height，而忽略了canvas.width和canvas.height这两个DOM属性。需要明确：DOM属性决定绘图缓冲区的分辨率，即实际绘制像素数；CSS样式仅控制页面上的显示尺寸。两者不一致相当于将低分辨率图像强行拉伸，必然导致模糊。

正确做法包括：

• 初始化时按window.devicePixelRatio缩放：

  const dpr = window.devicePixelRatio || 1;
  canvas.width = Math.floor(width * dpr);
  canvas.height = Math.floor(height * dpr);
  canvas.style.width = width + 'px';
  canvas.style.height = height + 'px';

• 绘图前调用ctx.scale(dpr, dpr)，避免后续坐标手动乘以dpr导致的错误
• 监听resize和orientationchange事件——iOS设备旋转后dpr可能不变，但布局重排需重新计算尺寸

img标签：srcset还是？依需求维度选择

仅需适配高分屏（同一尺寸下选择1x或2x图）时，srcset足够；若需根据屏幕宽度切图（如手机用400w尺寸、桌面用1200w尺寸），则应使用。具体写法注意：

• ，通过src提供fallback，老浏览器可降级显示
• 中，先匹配media条件，再在匹配的内按srcset选图
• Webpack或Vite构建时，静态资源路径不会自动补@2x后缀，需通过插件或自定义resolve规则，否则2x图返回404

CSS背景图适配Retina：-webkit-image-set()为首选，媒体查询为备选

-webkit-image-set()是目前最简洁的控制方式，原生支持1x/2x/3x多倍图声明，无需JavaScript介入。典型写法：

div {
  background-image: -webkit-image-set(
    url(icon.png) 1x,
    url(icon@2x.png) 2x,
    url(icon@3x.png) 3x
  );
}

需要注意的细节：

• Safari 15.4+、Chrome 93+、Firefox 103+支持标准语法image-set()，但兼容性不如-webkit-image-set()稳定
• 媒体查询方案（如@media (-webkit-min-device-pixel-ratio: 2)）需重复编写整套背景规则，维护成本高
• 无论使用哪种方式，background-size必须设为逻辑尺寸（如16px 16px），否则高清图会撑大容器

1px边框在Retina上变粗？先检测浏览器支持，避免直接写0.5px

0.5px在iOS 7、Android 4.x等旧系统中会被解析为0px，导致边框消失。不能无脑使用。正确做法是借助JavaScript检测浏览器是否实际支持：

if (window.devicePixelRatio >= 2) {
  const test = document.createElement('div');
  test.style.border = '.5px solid transparent';
  document.body.appendChild(test);
  if (test.offsetHeight === 1) {
    document.documentElement.classList.add('hairlines');
  }
  document.body.removeChild(test);
}

检测必须在DOM ready之后执行，不能放在DOMContentLoaded之前。后续样式可写为.hairlines .border-1px { border: 0.5px solid #ccc; }，未通过检测的设备则fallback到1px。伪元素加transform: scaleY(0.5)是更通用的fallback方案，但需注意父容器的overflow: hidden可能造成裁剪。

归根结底，Retina适配的难点不在于某一行代码，而在于它是一个贯穿HTML、CSS、JavaScript、构建流程的系统性链路。canvas的width/height、img的srcset fallback、CSS的image-set兼容性、构建工具对@2x资源的识别——任何一个环节遗漏，都可能导致特定设备上出现模糊问题。