我可以通過設置媒體查詢設置內容CSS屬性來測試視網膜設備嗎？

有人在視網膜設備上設置content css屬性body時是否有任何問題，以用於運行視網膜特定的js？我可以通過設置媒體查詢設置內容CSS屬性來測試視網膜設備嗎？

在我看來，這似乎是最簡單，最輕，跨瀏覽器的視網膜設備測試解決方案。至少它的工作對我來說...

CSS：

@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 
    body { 
     content: 'retina' 
    } 
}

測試使用jQuery：

var isRetina = $('body').css('content') == 'retina';

來源

2014-07-24 kevnk

不是想在這裏吹毛求疵，但「視網膜」是一個簡單的的銷售名稱Apple設備上的高分辨率顯示屏。您真正想要的是所有移動設備（平板電腦和手機）上的高分辨率顯示屏。移動設備的分辨率會有所不同;有些會比Apple視網膜顯示器更高或更低。無論哪種方式，像素比例方法都可以工作。 – Jason

使用window.devicePixelRatio。如果它超過1 - 它是retina顯示。

對於IE 10+（其中IE可在平板電腦和智能手機），你可以在screen.deviceXDPI和screen.logicalXDPI繼電器：

window.devicePixelRatio = window.devicePixelRatio || 
         window.webkitDevicePixelRatio || 
         screen.deviceXDPI/screen.logicalXDPI || 
         1;

來源

2014-07-24 21:19:22 Pinal

如果window.devicePixelRatio不存在，肯定要添加一個回退。例如，只有IE11實際上擁有該屬性。 – Jason

根據http://www.quirksmode.org/mobile/tableViewport.html IE9和IE10不支持window.devicePixelRatio，並且http://caniuse.com/css-mediaqueries顯示媒體查詢支持，直到您進入IE8 – kevnk

I更新了我對IE的回答。 IE 9和8 a在高分辨率設備上不可用。 – Pinal

我可以通過設置媒體查詢設置內容CSS屬性來測試視網膜設備嗎？

回答

相關問題