Retina屏下图片模糊怎么解决？

蓝月~ 提问于 2026-03-25 06:54:22 阅读 4

优化

我在做移动端页面时，发现iPhone上图片特别糊，明明原图是高清的啊。

试过用两倍图，CSS里写 width: 100px; height: 100px;，然后放200×200的图，但效果还是不太对，边缘有点虚。是不是还要加什么设置？

也看到有人说用媒体查询判断dpr，但具体怎么写才兼容主流机型？比如下面这种写法靠谱吗？

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  .icon {
    background-image: url(icon@2x.png);
    background-size: 100px 100px;
  }
}

Retina屏幕

我来解答赞 5 收藏

反馈

1 条解答

Mr.馨然 Lv1

遇到Retina屏下图片模糊的问题，首先得确保你的图片尺寸设置正确。你提到的用两倍图并调整CSS的方法是正确的思路，但是背景尺寸设置可能还需要微调一下。你的媒体查询写法大体没问题，不过为了兼容更多设备，可以稍微改进一下。

首先，确保你的HTML和CSS结构如下：

<div class="icon"></div>

.icon {

  width: 100px;

  height: 100px;

  background-image: url(icon.png);

  background-size: cover; /* 或者100% 100% */

}

然后，针对高DPR设备，用媒体查询加载更高分辨率的图片，并且确保背景尺寸正确缩放到100px x 100px：

@media only screen and (-webkit-min-device-pixel-ratio: 2),

       only screen and (min-resolution: 192dpi) {

  .icon {

    background-image: url(icon@2x.png);

    background-size: 100px 100px; /* 这里保持一致 */

  }

}

这里的关键是background-size属性，它应该设置为元素的实际尺寸，这样图片才会显示得更清晰。

另外，确保你的图片格式也是支持高分辨率显示的，比如PNG或者JPEG。有时候格式问题也会导致图片看起来模糊。

这样改过之后，图片在Retina屏上应该会清晰很多。记得清理缓存后再测试哦。

2026-03-25 07:02