跨浏览器@media查询检测视网膜显示？

Question

到目前为止，我只能找到以下媒体查询：

@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 
    /* Retina-specific stuff here */
}

然而它似乎只支持webkit浏览器，是否有类似的查询（至少） -moz-和-ms-（ - o-）浏览器？

Answer 1

您可以执行的操作而不是检测设备像素比或最小分辨率，您可以检测设备宽度，即屏幕尺寸的分辨率，而不是视口宽度，即浏览器尺寸的分辨率。首先，当您尝试定位特定设备时，会为您提供正确的媒体查询，并检测您需要使用的“视网膜”设备：

@media screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) {
/* code goes here */
}

这会设置媒体查询，以识别像iDevices上的视网膜显示缩放的设备，并帮助定位它们，以避免其他设备接收这些css样式。

请告诉我这是否适合您。

Answer 2

没有视网膜显示器这样的东西。我有一个MacBookPro，Apple标记为“视网膜”（所以我明白你认为你的意思是什么），但这个词是完全构成的，真的没有任何意义。

因此，您将无法检测到它，因为您将无法检测到严格定义的“高性能游戏计算机”。