移动设备的媒体查询，但不是 Retina 显示器答案

【问题标题】：Media Query for Mobile Devices, but not Retina Display移动设备的媒体查询，但不是 Retina 显示器
【发布时间】：2013-04-30 23:24:24
【问题描述】：

现在我正在使用以下媒体查询，它对我的目的（移动设备）来说效果很好。

    @media
    only screen and (max-width : 600px),
    only screen and (-webkit-min-device-pixel-ratio : 1.5),
    only screen and (min-device-pixel-ratio : 1.5)

也就是说，直到我发现像素比实际上触发了 13 英寸？带有视网膜显示器的 macbook。所以，我的问题是，有没有办法在像素比旁边指定另一个约束，例如“最大像素宽度为 1080p”或类似的东西？

【问题讨论】：

标签： css mobile responsive-design media-queries retina-display

【解决方案1】：

您的媒体查询在三个条件下会执行该 CSS；您需要将这些组合起来以仅捕获移动视网膜屏幕。像这样：

@media (max-width : 600px), and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5)

这设置了两个条件：“最大 600 像素，设备像素比为 1.5 或更大”

【讨论】：

谢谢，这似乎在我测试过的设备上运行良好。