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

【问题标题】：How do high-DPI devices like Retina displays and 1080p phones handle pixels in media queries?Retina 显示器和 1080p 手机等高 DPI 设备如何处理媒体查询中的像素？
【发布时间】：2014-05-03 01:39:53
【问题描述】：

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

【问题讨论】：

CSS Pixels are not physical pixels
这很有趣……至少在 CSS 方面少了一件需要担心的事情。

标签： html css media-queries screen-resolution dpi

【解决方案1】：

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

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

实际上将针对 iPhone（纵向），即使它是 640 设备像素宽。

【讨论】：

iPhone 并非总是 Retina 设备，但是是的，无论其显示分辨率如何，这都会以纵向方式定位 iPhone。事实上，如果有的话，同时存在 Retina 和非 Retina iPhone 的事实就是 CSS 像素如此强大的原因。