Search code examples
javascriptjquerycssjquery-pluginsmedia-queries

how do i prevent respond.js reading my retina display media query?

I have added respond.js to activate media queries in ie7+8, the problem that Im having though is that ie7+8 now seem to read the retina display media query which as you can imagine is messing up my layout. Has anyone else experienced this problem and if so how can this be prevented?

    @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
}

Update for anyone having the same problem:

Basically I moved any hd media queries into their own .css file (hd.css) then added a conditional statement into the section of my site that prevents lte IE 8 from seeing it.

Solution

  • You could add a class specific to IE detection (if you haven't already) to your html tag with jQuery, a lot like Modernizr does for browser capabilities. Then wrap the styles within the media query:

    @media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {

   html.no-ie div#mydiv{
      /* STYLES FOR #mydiv HERE */
   }

}

    Detect the browser with jQuerys $.browser property and add a class to your html tag (with version...because...why not?):

    /* CHECK IF BROWSER IS IE */
if($.browser.msie){
   /* GET THE BROWSER VERSION...BECAUSE WE CAN! */
   var version = $.browser.version;

   /* ADD CLASSES FOR BROWSER + VERSION TO HTML TAG ie. <html class="ie ie6"> */
   $('html').addClass("ie ie" + Math.floor(version));
}

    Hope that's helpful.