html - 跨浏览器@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 */
}

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

让我知道这是否适合你。

Answer 2

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

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