但是Apple says iPhone 6的分辨率是750×1334！如果是真的,那么形象应该会更糟糕,我会想.
我在iPhone 4上发现了一些矛盾的信息.
This site谈论iPhone 4的640×960像素. Chrome模拟器再次显示为320×480的一半尺寸.
This stackoverflow question说“iPhone屏幕绝对是320×480”.
我在这里缺少什么？为什么某些来源(包括苹果)的供应尺寸是Chrome模拟器(和我的图片)所说的两倍？
解决方法
像素不是像素
关键是：一个设备像素与一个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 =“”,否则浏览器将默认为设备的全部宽度.