我如何防止閱讀我的視網膜顯示媒體查詢的respond.js？

我已經添加了respond.js來激活ie7 + 8中的媒體查詢，雖然我現在看到ie7 + 8似乎正在讀取視網膜顯示媒體查詢，但您可以想象的問題是搞亂了我的佈局。有沒有其他人遇到過這個問題，如果有的話，如何防止這種情況？我如何防止閱讀我的視網膜顯示媒體查詢的respond.js？

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

更新具有相同問題的人：然後

基本上我感動任何高清媒體查詢到自己的.css文件（hd.css）增加了一個條件語句到我的網站的部分這可以防止IE 8看到它。

來源

2012-01-25 styler

你需要隱藏IE7-8的無辜的眼睛這樣的事情。 –

你可以添加一個特定於IE檢測的類（如果你還沒有）到jQuery的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)); 
}

希望有幫助。

來源

2012-01-25 17:26:51

嘗試從媒體查詢刪除「僅屏幕」的引用，以便它讀取：

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

}

來源

2012-04-27 16:02:11

是的，但如果我這樣做了，那麼較大的標誌將覆蓋較小的移動視網膜標誌。有視網膜大小的媒體查詢和沒有大小的媒體查詢，這些沒有大小的視頻會被respond.js忽略，但那些使用max或min的視頻會被respond.js拿回來，而舊的IE會帶上它們並顯示標誌的2x版本並且由於它不瞭解背景大小，所以完全搞砸了。 – Christina

與樣板的文件頭，我添加了一個類的「現代」到最後條件不條件的一個與在< - > 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/[email protected]); 
     -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;  
}

來源

2012-09-12 22:13:38 Christina

我非常簡單的解決方案利用了bug的核心問題來解決問題。根本問題在於respond.js看到了-webkit-min-device-pixel-ratio屬性，不知道該怎麼做，只是忽略它，錯誤地顯示了樣式塊。我的解決方案是複製整個媒體查詢塊，並將其粘貼到css中並將'-webkit-min-device-pixel-ratio'更改爲'-webkit -lessless-fake-property'，然後使所有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無用的假屬性媒體查詢。

來源

2013-01-30 21:31:23 Arron

我用的史蒂夫O公司和克里斯蒂娜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 { 
    } 
}

如果使用北斗我可以推薦這個混入：Retina-Sprite-for-Compass

來源

2013-05-23 01:59:21

我認爲這是最好的解決方案，因爲它利用Modernizr。 – sarahjean

我如何防止閱讀我的視網膜顯示媒體查詢的respond.js？

回答

相關問題