javascript - 基于设备像素比的响应式图像

Question

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

我的移动设备分辨率为 480x854，设备像素比为 1.5，即如果我发送宽度为 320px (480/1.5) 的图像，只要我们指定视口(viewport)，它将自动适应浏览器的宽度，

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

如果我提供宽度为 480px 的图像，它将超出浏览器的实际宽度。但是，如果指定这一点，

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

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

那么，基于设备像素比显示图像的可行方法是什么？我必须为我的设备发送 320 像素或 480 像素(100%)图像吗？

Answer 1

浏览器负责处理所有需要的缩放。如果您的实际设备宽度为 480 像素，虚拟宽度为 320 像素，其中包含缩放至 100% 的图像(虚拟宽度为 320 像素)，但图像宽度为 480 像素，则它将以全部 480 像素显示，但以编程方式会测量为 320px。

如今，尝试获得像素完美的图像已经没有什么意义了。有许多设备具有多种分辨率。发送质量不错的图像，让浏览器为您完成工作。