为什么Google Chrome模拟器显示375×667分辨率的iPhone 6？
我试图以编程方式适应我的网站的图像大小为不同大小的设备。 但现在我很难告诉我实际需要什么尺寸。 在谷歌浏览器模拟器，我看到我的一些图像升级，例如在iPhone 6从230×230自然到357×357显示。 图像几乎占据了模拟屏幕的整个宽度，并且看起来略微降低，这表明iPhone 6的宽度并不比357像素大得多。
但苹果公司表示 ，iPhone 6的分辨率为750×1334！ 如果那是真的，我会想，这个形象应该看起来更糟。
我在iPhone 4上也发现了一些矛盾的信息。
这个网站在640×960像素谈论iPhone 4。 Chrome模拟器再次将其显示为尺寸为320×480的一半。
这个stackoverflow问题说，“iPhone屏幕是320×480绝对。”
我在这里错过了什么？ 为什么有些来源（包括苹果）提供的尺寸是Chrome模拟器（和我的图片）的两倍？
放松一下，你即将了解这个烂摊子。 只要注意2 * 375x667 = 750x1334 。
像素不是像素
关键是： 一个 设备像素 不同于一个 CSS像素 。
它们在低像素密度设备（如计算机屏幕（96 dpi））中是相同的。 然而， 高像素密度的设备，如智能手机和打印机（高达160 dpi），尝试遵守一般的W3C CSS3规范 ，从一般距离来看，一个CSS像素应该总是接近1/96英寸（或0.26毫米） （arm的长度）。
他们不遵守规范的信件，因为这意味着在高DPI设置中1px正好是1英寸的1/96，这在任何浏览器AFAIK中都没有实现过。 然而，尽pipe像素密度非常高，但是通过使一个CSS像素等于两个或更多设备像素 ，他们尝试使CSS像素不那么小。
Chrome设备模式适用于CSS像素 ，这是您应该用来devise文本，导航栏，标题等，但不是高分辨率图像。 对于这些，阅读下一节。
如果您没有注意到，上面的图片显示Chrome设备模式确实会显示设备比例（有多less设备像素等于一个CSS像素）。
修复图像分辨率
如您所知，这会影响图像，因为浏览器也会缩放图像。 您的230×230 CSS像素图片变成460×460 设备像素 ，使用相同的质量。 要解决这个问题，请使用srcset属性为浏览器提供指向同一图像的不同分辨率文件的链接。
示例（从上面的链接改编）：
<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="" ，否则浏览器将默认为设备的全部宽度。