Modernizr Pixel Ratio Media Query -


Used to look at results on different devices using advanced tools and CSS media queries. I have added a test for -webkit-device-pixel-ratio: 2 to detect retinal display device, which will then execute a small jquery script to insert an image into the page.

Although the script is not executed, instead it calls another test callback function. Why is there any idea? Tested on iPad 2, iPhone 4 and Android emulator.

The pure CSS media query works like a magic, and incorporates a message. Modernizr MQ test does not seem to work.

  / * * Retina Display Test * / {test: Modernizr.mq ('- WebKit-device-pixel-ratio: 2'), Yes: 'js / retina.js', no : 'Js / regular.js',}, // and retina test   

Here's what I use:

  Modernizr.addTest ('virus', function () (// for opera var) ratio = '2.99 / 2'; // webkit var num = '1.499'; var mqs = ['screen only and (-O-min-device-pixel-proportion:' + ratio + ')', 'screen only (and minimum - mozzes-device-pixels -Account: '+ num +'), 'of The wal screen and (-webkit-min-device-pixel-ratio: '+ num +') ',' screen only and (minimum-device-pixel-proportion: '+ num +') ']; var is hybrid = false ; Loop through vendors; First check non-prefix (var i = mqs.length - 1; i> gt; = 0; I--) {isHighRes = Modernizr.mq (mqs [i]) ; // If one has got one, then come back soon (haHouse) {return is the hypersus;}} // does not have recurrence hypersus;});   

Then do the modern use anywhere in your JS.

Note: This code is not me

Comments