ios - 为什么 Google Chrome 模拟器以 375x667 分辨率显示 iPhone 6？

Question

我正在尝试以编程方式针对不同大小的设备调整我网站的图像大小。但是现在我很难说出我实际需要的尺寸。在 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 模拟器(和我的图片)显示的尺寸的两倍？

Answer 1

放松点，你很快就会明白这个烂摊子。请注意 2 * 375x667 = 750x1334。

一个像素不是一个像素

关键是:一个 设备像素 不同于一个 CSS像素。

它们在低像素密度设备中是相同的，例如您的计算机屏幕 (96 dpi)。然而，高像素密度设备，如智能手机和打印机(160 dpi 以上)试图遵守一般 W3C CSS3 spec理解一个 CSS 像素从通常距离( ARM 的长度)观看时应始终接近 1/96 英寸(或 0.26 毫米)。

他们不严格遵守规范，因为这意味着 1px 在高 DPI 设置下正好是一英寸的 1/96，这不是从未在任何浏览器 AFAIK 中实现过。然而，尽管像素密度非常高，他们仍试图通过使 一个 CSS 像素等于两个或更多设备像素 来使他们的 CSS 像素不那么小。

Chrome 设备模式使用 CSS 像素，您应该使用它来设计文本、导航栏、标题等，但不适用于高分辨率图像。对于这些，请阅读下一节。

^{如果您没有注意到，上图显示 Chrome 设备模式确实向您显示了设备比例(多少个设备像素等于一个 CSS 像素)。}/p>

固定图像分辨率

如您所知，这会对图像产生负面影响，因为浏览器也会缩放图像。您的 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=""，否则浏览器将默认为设备的全宽。