Javascript 基于设备像素比的响应图像

我对反应灵敏的图像感到困惑在移动设备上查看时，设备像素比率如何影响图像。

我有一个分辨率为480x854的移动设备，设备像素比为1.5，即如果我发送一个宽度为320px（480/1.5）的图像，它将自动适应浏览器的宽度，前提是我们将视口指定为

<meta name="viewport" content="width=device-width, initial-scale=1">

如果我提供一个宽度为480px的图像，它将超出浏览器的实际宽度。但是,如果具体说明,

<style>
    img {
        width: 100%;
    }
</style>

img{
宽度：100%；
}

它以100%的浏览器宽度显示，质量明显高于320px图像

---

因此，根据设备像素比例显示图像的可行方法是什么？我是否必须为我的设备发送320px或480px（100%）图像？

浏览器会处理所有需要的缩放。如果实际设备宽度为480px，虚拟宽度为320px，其中包含一个缩放为100%（虚拟宽度为320px）的图像，但该图像为480px宽，则该图像将在所有480px中显示，但以编程方式测量为320px

如今，试图获得完美的图像像素几乎毫无意义。有许多具有多种分辨率的设备。发送一张高质量的图像，让浏览器为您完成这项工作