WebKit introduced the -webkit-device-pixel-ratio media feature and window.devicePixelRatio JavaScript property, to allow web authors to detect whether their page was being rendered on an iPhone with a retina display:
- https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html#//apple_ref/doc/uid/TP40007601-SW3
- http://www.robertprice.co.uk/robblog/archive/2011/5/Detecting_Retina_Displays_From_JavaScript_And_CSS.shtml
Mozilla and Opera have introduced equivalent media features, -moz-device-pixel-ratio and -o-device-pixel-ratio. However, they don’t seem to have introduced the JavaScript property to go along with them.
Is there any way to detect the device pixel ratio via JavaScript in Firefox and Opera?
You can test media features from JS using https://developer.mozilla.org/en/DOM/window.matchMedia