ie7 + 8のmediaクエリを有効にするためにrespond.jsを追加しました。私のレイアウトを乱すと思われる網膜ディスプレイのメディアクエリをie7 + 8が読み取っているようです。他の誰かがこの問題を経験していますか？もしそうなら、どうすればこのことを防ぐことができますか？retinaのメディア照会を読み取るrespond.jsの防止方法を教えてください。
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
}
同じ問題を抱えて誰のための更新：
基本的に私は自分のの.cssファイル（hd.css）に任意のHDメディアクエリを移動するには、その後、私のサイトのセクションに条件文を追加しましたそれはlte IE 8がそれを見ることを妨げる。
jQueryを使用してhtmlタグにIE検出に固有のクラスを追加することができます（ブラウザ機能の場合は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));
}
希望します。
それは読むように、あなたのメディアクエリから「画面だけ」の参照を削除してください：
@media (-webkit-min-device-pixel-ratio: 2),
(min-device-pixel-ratio: 2){
}
はい、私がそれをした場合、より大きなロゴはより小さい可動性の網膜のロゴよりも優先されます。レスキューのサイズがないメディアクエリーがあり、サイズのないものはrespond.jsで無視されますが、maxまたはminを使用するものはrespond.jsで取得され、古いIEはそれらを取得してロゴの2倍バージョンを表示しますバックグラウンドサイズがわからないので、それは完全に台無しです。 – Christina
定型のドキュメント頭で、私は条件なしで最後の条件に「近代」クラスを追加して1 ！ - < htmlタグの前>：私の網膜のCSSで、その後
<!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は最大値と最小（この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;
}
私の非常に単純な解決策は、バグの中核的な問題を利用して、それを修正することです。根本的な問題は、respond.jsが-webkit-min-device-pixel-ratioプロパティーを見て、何をすべきかを知らず、スタイルブロックを間違って表示するだけです。私の解決策は、メディアクエリブロック全体をコピーし、直後にCSSに貼り付け、 '-webkit-min-device-pixel-ratio'を '-webkit-useless-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-useless-fake-propertyメディアクエリを無視します。
は私が私のcustom build of ModernizrにCSS-mediaqueries検出を含むメディアクエリ機能にもう少し具体的に：
私はスティーブ・OさんとクリスティーナArasmo Beymerの回答の組み合わせを使用します。 次に、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
私はこれがModernizrを活用しているので、これが最善の解決策だと思います。 – sarahjean
あなたがIE7-8の無実の目からそのようなものを非表示にする必要があります。 –