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

Question

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

    @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”或类似的东西？

Answer 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 或更大”