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

Question

我正在尝试以编程方式调整我的网站的图像大小以适应不同大小的设备.但现在我无法确定我实际需要的尺寸.在谷歌C​​hrome模拟器中,我看到我的一些图像升级,例如在iPhone 6上显示从230x230自然到357x357.该图像几乎占据了模拟屏幕的整个宽度,看起来略微降低,表明iPhone 6的宽度不会大于357像素.

但Apple表示 iPhone 6的分辨率为750x1334!如果这是真的,我认为图像应该看起来更糟糕.

我在iPhone 4上也发现了一些矛盾的信息.

该网站以640x960像素的价格谈论iPhone 4.Chrome模拟器再次以一半尺寸320x480显示它.

这个stackoverflow问题说"iPhone屏幕肯定是320x480."

我在这里错过了什么？为什么某些来源(包括Apple)提供的尺寸是Chrome模拟器(和我的图像)所说的两倍？

Answer 1

放松,你即将理解这个烂摊子.请注意2 * 375x667 = 750x1334.

像素不是像素

关键是:一个 设备像素 与一个 CSS像素不同.

它们在像素计算机屏幕(96 dpi)等低像素密度设备中是相同的.然而,像智能手机和打印机(高达160 dpi)这样的高像素密度设备试图遵循一般的W3C CSS3规范理解,当从通常距离观看时,一个CSS像素应始终接近1/96英寸(或0.26 mm) (手臂的长度).

它们不符合该字母的规范,因为这意味着在高DPI设置1px中恰好是一个真实英寸的1/96,这在任何浏览器AFAIK中都没有实现.然而,他们试图通过使一个CSS像素等于两个或更多设备像素来尽可能高的像素密度使其CSS像素不那么微小.

Chrome设备模式适用于CSS像素,您应该使用它来设计文本,导航栏,标题等,而不是高分辨率图像.有关这些,请阅读下一节.

^{如果您没有注意到,上面的图片显示Chrome设备模式确实显示设备比例(有多少设备像素等于一个CSS像素).}

修复图像分辨率

如您所知,这会对图像产生负面影响,因为浏览器也会缩放图像.您的230x230 CSS像素图片使用相同的质量变为460x460 设备像素.要解决此问题,请使用该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=""浏览器将默认为设备的整个宽度.