1

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

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

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

如果我提供宽度为 480 像素的图像，它会超出浏览器的实际宽度。但是，如果指定这个，

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

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

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

4

1 回答 1

0

浏览器负责所有需要的缩放。如果您的真实设备宽度为 480 像素，虚拟宽度为 320 像素，其中包含缩放为 100% 的图像（虚拟宽度为 320 像素）但图像宽度为 480 像素，它将以全部 480 像素显示就好了，但以编程方式将测量为 320px。

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

于 2014-03-15T15:33:30.687 回答