为什么 Google Chrome 模拟器在 375x667 分辨率下显示 iPhone 6？
Why does Google Chrome emulator show iPhone 6 at 375x667 resolution?
我正在尝试以编程方式针对不同大小的设备调整我网站的图像大小。但是现在我很难说出我实际需要的尺寸。在 Google Chrome 模拟器中，我看到我的一些图片放大了，例如iPhone 6 从 230x230 自然到 357x357 显示。该图像几乎占据了模拟屏幕的整个宽度，看起来略有退化，表明 iPhone 6 的宽度不会比 357 像素大很多。
但是 Apple says iPhone 6 的分辨率为 750x1334！如果那是真的，我认为图像应该看起来更糟。
我在 iPhone 4 上也发现了一些相互矛盾的信息。
This site 谈论 iPhone 4 640x960 像素。 Chrome 模拟器再次以这些尺寸的一半显示它，320x480。
This Whosebug question 表示 "the iPhone screen is 320x480 definitely."
我在这里错过了什么？为什么某些来源（包括 Apple）提供的尺寸是 Chrome 模拟器（和我的图像）所说的尺寸的两倍？
放松点，你很快就会明白这个烂摊子了。请注意 2 * 375x667 = 750x1334.
像素不是像素
关键是：一个设备像素不同来自一个 CSS 像素.
它们在 低像素密度设备 中是相同的，例如您的计算机屏幕 (96 dpi)。但是，高像素密度设备，如智能手机和打印机（160 dpi 以上）尽量遵循一般W3C CSS3 spec理解，即一个 CSS 像素应始终接近从通常距离（手臂的长度）观察时，1/96 英寸（或 0.26 毫米）。
他们不严格遵守规范，因为这意味着 1px 在高 DPI 设置下恰好是 真实 英寸的 1/96，这从未在任何浏览器 AFAIK 中实现过。然而，他们试图通过使 一个 CSS 像素等于两个或更多设备像素 .[= 来使 CSS 像素不那么小，尽管像素密度非常高。 22=]
Chrome 设备模式适用于 CSS 像素，这是您应该用来设计文本、导航栏、标题等的内容，但不是 high-resolution 图片。对于这些，请阅读下一节。
如果您没有注意到，上图显示 Chrome 设备模式确实向您显示了设备比例（多少设备像素等于 1 CSS 像素).
修复图像分辨率
如您所知，这会对图像产生负面影响，因为浏览器也会缩放图像。您的 230x230 CSS 像素 图片变为 460x460 设备像素，使用相同的质量。要解决此问题，use the srcset attribute 为浏览器提供 link 同一图像的不同分辨率文件。
示例（改编自上面的 link）：
<img src="wolf-400.jpg" srcset="wolf-400.jpg 400w, wolf-800.jpg 800w, wolf-1600.jpg 1600w">
一个 iPhone 6 会看着那个然后思考 "oh, I pretend to be 375px wide but I'm actually 750px, so I'll download wolf-800.jpg."
只是不要忘记使用 src="" 来实现兼容性。此外，除非您使用 sizes=""，否则浏览器将默认为设备的全宽。
我正在尝试以编程方式针对不同大小的设备调整我网站的图像大小。但是现在我很难说出我实际需要的尺寸。在 Google Chrome 模拟器中，我看到我的一些图片放大了，例如iPhone 6 从 230x230 自然到 357x357 显示。该图像几乎占据了模拟屏幕的整个宽度，看起来略有退化，表明 iPhone 6 的宽度不会比 357 像素大很多。
但是 Apple says iPhone 6 的分辨率为 750x1334！如果那是真的，我认为图像应该看起来更糟。
我在 iPhone 4 上也发现了一些相互矛盾的信息。
This site 谈论 iPhone 4 640x960 像素。 Chrome 模拟器再次以这些尺寸的一半显示它，320x480。
This Whosebug question 表示 "the iPhone screen is 320x480 definitely."
我在这里错过了什么？为什么某些来源（包括 Apple）提供的尺寸是 Chrome 模拟器（和我的图像）所说的尺寸的两倍？
放松点，你很快就会明白这个烂摊子了。请注意 2 * 375x667 = 750x1334.
像素不是像素
关键是：一个设备像素不同来自一个 CSS 像素.
它们在 低像素密度设备 中是相同的，例如您的计算机屏幕 (96 dpi)。但是，高像素密度设备，如智能手机和打印机（160 dpi 以上）尽量遵循一般W3C CSS3 spec理解，即一个 CSS 像素应始终接近从通常距离（手臂的长度）观察时，1/96 英寸（或 0.26 毫米）。
他们不严格遵守规范，因为这意味着 1px 在高 DPI 设置下恰好是 真实 英寸的 1/96，这从未在任何浏览器 AFAIK 中实现过。然而，他们试图通过使 一个 CSS 像素等于两个或更多设备像素 .[= 来使 CSS 像素不那么小，尽管像素密度非常高。 22=]
Chrome 设备模式适用于 CSS 像素，这是您应该用来设计文本、导航栏、标题等的内容，但不是 high-resolution 图片。对于这些，请阅读下一节。
如果您没有注意到，上图显示 Chrome 设备模式确实向您显示了设备比例（多少设备像素等于 1 CSS 像素).
修复图像分辨率
如您所知，这会对图像产生负面影响，因为浏览器也会缩放图像。您的 230x230 CSS 像素 图片变为 460x460 设备像素，使用相同的质量。要解决此问题，use the srcset attribute 为浏览器提供 link 同一图像的不同分辨率文件。
示例（改编自上面的 link）：
<img src="wolf-400.jpg" srcset="wolf-400.jpg 400w, wolf-800.jpg 800w, wolf-1600.jpg 1600w">
一个 iPhone 6 会看着那个然后思考 "oh, I pretend to be 375px wide but I'm actually 750px, so I'll download wolf-800.jpg."
只是不要忘记使用 src="" 来实现兼容性。此外，除非您使用 sizes=""，否则浏览器将默认为设备的全宽。