媒体查询移动设备，但不支持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)

这设置了两个条件，它们都说：＆＃34;最多600px，设备像素比率为1.5或更高＆＃34;