Question

我已经添加了respond.js来激活ie7 + 8中的媒体查询，我现在遇到的问题是ie7 + 8现在似乎正在阅读视网膜显示媒体查询，你可以想象它正在弄乱我的布局。有没有其他人遇到过这个问题，如果有的话怎么能阻止这个？

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

对遇到同样问题的人进行更新：

基本上我将任何高清媒体查询移动到他们自己的.css文件（hd.css）中，然后在我的网站部分添加一个条件语句，以防止IE IE 8看到它。

Answer 1

您可以使用jQuery将特定于IE检测的类（如果您还没有）添加到您的html标记中，就像Modernizr对浏览器功能一样。然后将样式包装在媒体查询中：

@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 */
   }

}

使用jQuerys $。browser 属性检测浏览器，并在html标记中添加一个类（使用版本...因为......为什么不呢？）：

/* 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));
}

希望这有帮助。

Answer 2

尝试从媒体查询中删除“仅屏幕”引用，使其显示为：

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

}

Answer 3

使用样板文件头，我在最后一个条件中添加了一个“现代”类，没有条件的＆lt;！ - ＆gt;在html标签之前：

<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js es lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js modern" lang="en"> <!--<![endif]-->

然后在我的视网膜css中 - 如果视网膜css在最大和最小的媒体查询内（这就是为什么respond.js读取它），我有：

.modern #logo a { /*w & h LOGO */
    background-image: url(../images/logo_@2x.png);
        -moz-background-size:200px 81px; /*w & h of original 72dpi image REMEMBER THIS IS THE LARGE LOGO*/
         -ie-background-size:200px 81px;
          -o-background-size:200px 81px;
     -webkit-background-size:200px 81px;
             background-size:200px 81px;    
}

Answer 4

我使用Steve O's和Christina Arasmo Beymer的答案组合：
为了更加具体的媒体查询功能，我将css-mediaqueries检测包含在我的custom build of Modernizr中。然后你的html标签中有一个mediaqueries类，不必编写自己的JS或者手动将类添加到你的html中。

现在你可以做到：

@media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5) {
  html.mediaqueries #element {
  }
}

如果你使用Compass，我可以推荐这个mixin：Retina-Sprite-for-Compass

Answer 5

我非常简单的解决方案利用了bug的核心问题来修复自己。根本问题是respond.js看到-webkit-min-device-pixel-ratio属性，不知道该怎么做，只是忽略它，错误地显示样式块。我的解决方案是复制整个媒体查询块，然后将其粘贴到css中并将'-webkit-min-device-pixel-ratio'更改为'-webkit-useless-fake-property'然后将所有css规则变为a否定前一个街区。 respond.js也会忽略它，传递它，它将撤消前一个块！

示例：

@media all and (-webkit-min-device-pixel-ratio:2) {
    #selector {
        background-image:url("img2x.png"); /* 1000 x 400 */
        background-size:500px 200px;
    }
}
@media all and (-webkit-useless-fake-property:2) {
    #selector {
        background-image:url("img.png"); /* 500 x 200 */
        background-size:auto;
    }
}

因为这实际上只适用于视网膜图像，所以“撤消”的规则并不多。浏览器没有摇头，手指放在耳朵里会使用原生CSS3，只是忽略-webkit-useless-fake-property媒体查询。

我怎么防止respond.js阅读我的视网膜显示媒体查询？

5 个答案: