ios – 为什么Google Chrome模拟器以375×667的分辨率显示iPhone 6？

我正在以编程方式调整我的网站的图像尺寸不同大小的设备.但现在我无法告诉我实际需要什么尺寸.在Google Chrome模拟器中,我看到我的某些图像有所增加,例如在iPhone 6从230×230自然到357×357显示.该图像几乎占据了仿真屏幕的整个宽度,并且看起来稍微退化,这表明iPhone 6的宽度不会大于357像素.

但是Apple says iPhone 6的分辨率是750×1334！如果是真的,那么形象应该会更糟糕,我会想.

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

This site谈论iPhone 4的640×960像素. Chrome模拟器再次显示为320×480的一半尺寸.

This stackoverflow question说“iPhone屏幕绝对是320×480”.

我在这里缺少什么？为什么某些来源(包括苹果)的供应尺寸是Chrome模拟器(和我的图片)所说的两倍？

解决方法

放松一下,你即将了解这个混乱.只要注意2 * 375×667 = 750×1334.

像素不是像素

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

它们在低像素密度设备(如电脑屏幕(96 dpi))上是相同的.然而,像像智能手机和打印机这样的高像素密度设备(高达160 dpi)会尝试遵循一般的W3C CSS3 spec的理解,即一个CSS像素应该始终接近1/96英寸(或0.26毫米),从普通距离观察长度).

他们不遵守该信件的规格,因为这意味着1px是高DPI设置中的一英寸的1/96,这在任何浏览器AFAIK中都没有实现.然而,尽管通过使一个CSS像素等于两个或更多个器件像素,它们仍然尝试使其CSS像素不那么微小,尽管具有非常高的像素密度.

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

如果您没有注意到,上图显示了Chrome设备模式会显示设备缩放(多少设备像素等于一个CSS像素).

修复图像分辨率

您已经知道,这会影响图像的负面,因为浏览器也会缩放图像.您的230×230 CSS像素图片变为460×460设备像素,使用相同的质量.为了解决这个问题,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 =“”,否则浏览器将默认为设备的全部宽度.