我正在尝试以编程方式调整我网站的图像大小以适应不同大小的设备。但现在我很难说出我真正需要的尺寸。在 Google Chrome 模拟器中，我看到我的一些图像被放大了，例如在 iPhone 6 上从 230x230 自然到 357x357 显示。该图像几乎占据了模拟屏幕的整个宽度，并且看起来略有退化，这表明 iPhone 6 的宽度不会超过 357 像素。
但是Apple says iPhone 6 的分辨率是 750x1334！如果那是真的，我想图像应该看起来更糟。
我在 iPhone 4 上也发现了一些相互矛盾的信息。
This site 谈论 640x960 像素的 iPhone 4。 Chrome 模拟器再次以一半的尺寸显示它，320x480。
This stackoverflow question 说“iPhone 屏幕肯定是 320x480。”
我在这里缺少什么？为什么某些来源（包括 Apple）提供的尺寸是 Chrome 模拟器（和我的图像）的两倍？
【问题讨论】：
放心，你马上就会明白这个烂摊子了。请注意2 * 375x667 = 750x1334。
关键是：一个 设备像素 不同于一个 CSS像素。
它们在低像素密度设备中是相同的，例如您的计算机屏幕 (96 dpi)。但是，高像素密度设备，如智能手机和打印机（160 dpi 以上）试图遵循一般的W3C CSS3 spec 理解，即一个 CSS 像素应始终接近 1/96 英寸（或 0.26 mm) 从通常的距离（手臂的长度）观察时。
他们并没有完全遵守规范，因为这意味着 1px 在高 DPI 设置中恰好是一真实英寸的 1/96，而这从未在任何设备中实现浏览器 AFAIK。然而，他们试图通过使 一个 CSS 像素等于两个或更多设备像素来使他们的 CSS 像素不那么小，尽管像素密度非常高。
Chrome 设备模式适用于 CSS 像素，您应该使用它来设计文本、导航栏、标题等，但不适用于高分辨率图像。对于这些，请阅读下一节。
如果您没有注意到，上图显示 Chrome 设备模式确实向您显示设备比例（多少设备像素等于一个 CSS 像素）。
如您所知，这会对图像产生负面影响，因为浏览器也会缩放图像。您的 230x230 CSS 像素 图片变为 460x460 设备像素，使用相同的质量。为了解决这个问题，use the srcset attribute 为浏览器提供指向同一图像的不同分辨率文件的链接。
示例（改编自上面的链接）：
<img src="wolf-400.jpg" srcset="wolf-400.jpg 400w, wolf-800.jpg 800w, wolf-1600.jpg 1600w">
iPhone 6 会看到它并想“哦，我假装是375px，但实际上我是750px，所以我会下载wolf-800.jpg。”
只是不要忘记使用src="" 来实现兼容性。此外，除非您使用sizes=""，否则浏览器将默认为设备的全宽。
【讨论】：
sizes 和 srcset 对我来说是新的，但在移动设备上看起来很有前途。我肯定会对此进行调查，因为我们一直在努力展示最佳质量的图像而不浪费带宽。另外，我之前听说过 CSS 像素，但是您对它的约 1/96 英寸基础的解释使它背后的逻辑更加清晰。指向 Chrome 模拟器“设备像素比率”指示器的蓝色箭头也非常有用，因为从现在开始，我将能够轻松判断我模拟的任何设备的比率。很好的答案！