像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设备像素宽