Javascript 如何防止respond.js读取我的视网膜显示媒体查询？_Javascript_Jquery_Css_Jquery Plugins_Media Queries

Javascript 如何防止respond.js读取我的视网膜显示媒体查询？

javascript jquery css jquery-plugins

Javascript 如何防止respond.js读取我的视网膜显示媒体查询？,javascript,jquery,css,jquery-plugins,media-queries,Javascript,Jquery,Css,Jquery Plugins,Media Queries,我已经添加了respond.js来激活ie7+8中的媒体查询，但我遇到的问题是ie7+8现在似乎在阅读视网膜显示媒体查询，正如你所想象的那样，这会弄乱我的布局。是否有其他人遇到过此问题？如果是，如何预防 @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { } 为有相同问题的人更新：基本上，我将任何高清媒体查询都移动到了自己的.

我已经添加了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）中，然后在我的站点的部分添加了一个条件语句，以防止lte IE 8看到它。

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

@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标记添加一个类（使用版本…因为…为什么不？）：

/*检查浏览器是否为IE*/
如果（$.browser.msie）{
/*获取浏览器版本…因为我们可以*/
var version=$.browser.version；
/*将BROWSER+版本的类添加到HTML标记ie*/
$（'html'）.addClass（“ie”+Math.floor（版本））；
}

希望这会有所帮助。

尝试从您的媒体查询中删除“仅屏幕”引用，以便其内容如下：

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

}

使用boilerplate的文档头，我在最后一个不带条件的条件中添加了一个类“modern”：

<!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]-->

我的非常简单的解决方案利用bug的核心问题来修复它自己。根本问题是respond.js看到了-webkit-min-device-pixel-ratio属性，不知道该做什么，只是忽略了它，错误地显示了样式块。我的解决方案是复制整个媒体查询块，然后将其粘贴到css中，并将“-webkit min device pixel ratio”更改为“-webkit无用的fake属性”，然后使所有css规则与前一个块相反。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无用的假属性媒体查询。

我将结合使用Steve O和Christina Arasmo Beymer的答案：
为了更具体地描述媒体查询功能，我将css媒体查询检测包含在我的应用程序中。然后在html标记中有一个

mediaqueries

类，不必编写自己的JS或手动向html添加类

现在您可以执行以下操作：

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

如果你使用Compass，我可以推荐这个mixin:

你需要在IE7-8无辜的眼睛面前隐藏这些东西。是的，但如果我这样做了，那么较大的徽标将覆盖较小的移动视网膜徽标。有媒体查询视网膜的大小和那些没有，那些没有大小的被respond.js忽略，但是那些使用max或min的被respond.js和旧IE接受并显示2倍版本的徽标，因为它不了解背景大小，这完全是一团糟。我认为这是最好的解决方案，因为它利用了现代化。

@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;
    }
}

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