Retina显示器和1080p手机等高DPI设备如何处理媒体查询中的像素？

Question

例如，带有Retina显示屏的iPhone有多少像素出现在媒体查询中？它是320像素还是640像素？如果它是640像素，网站如何处理不同的设备分辨率？无论屏幕分辨率如何，有没有办法使用相同的单位？

Answer 1

iPhone和iPad等Retina设备通常使用2个设备像素= 1个CSS像素。所以像这样的媒体查询：

@media all and (max-width: 320px) {
}

实际上会以iPhone（肖像）为目标，即使它是640像素的像素宽。