Internet Explorer 8使用視網膜像素媒體查詢

我正在構建一個SASS/Compass響應式網站，並且我包括視網膜圖標（使用生成的精靈）。我將這些圖標包含在我的.scss中，並帶有一個mixin。Internet Explorer 8使用視網膜像素媒體查詢

我的視網膜圖標混入：

// Retina icons 
@mixin sprite-background($name, $xpos: 0px, $ypos: 0px, $xpos2x: $xpos, $ypos2x: $ypos, $size: image-width(sprite-file($icons, $name))) { 
    background-image: sprite-url($icons); 
    background-position: sprite-position($icons, $name, $xpos, $ypos); 
    background-repeat: no-repeat; 
    display: block; 

    @media all and ($pixel-ratio) { 
    @if (sprite-position($icons, $name) != sprite-position($icons2x, $name)) { 
     background-position: $xpos2x $ypos2x; 
    } 
    @include background-size($size auto); 
    background-image: sprite-url($icons2x); 
    } 
}

變量：

$pixel-ratio: "-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 1.5";

用法：

.selector { 
    @include sprite-background(clock_small, 0px, 2px, 0px, -1013px, 45px); 
}

我的問題是Internet Explorer 8在使用我的視網膜精靈作爲background-image ，並在background-size上失敗。我知道IE8不支持background-size，所以它被忽略，但這意味着我的圖標定位不正確。

使用JavaScript，你可以找到你的當前pixelratio：

alert(window.devicePixelRatio);

此提醒：undefined在Internet Explorer中。爲什麼我的「視網膜媒體查詢」接受undefined作爲一個有效的數字，並執行其CSS？有沒有解決方法？

來源

2013-12-11 Jrn

的可能重複[好方法作廢自適應網頁設計/媒體查詢的IE 8 - ？（HTTP：//計算器。 com/questions/8914474/good-method-to-void-responsive-web-design-media-queries-for-ie-8） – cimmanon

您可以devicePixelRatio分配默認值，如果未定義

window.devicePixelRatio = window.devicePixelRatio || 1

來源

2013-12-11 21:12:29

我使用了一段JavaScript進行調試。我無法控制我的mixin。我的問題是，我的視網膜媒體查詢認爲'undefined'是一個更高的數字，然後'1.5'所以它的CSS被執行。 – Jrn

也許你可以試試這個：'document.body.className + =！（window.devicePixelRatio）|| （window.devicePixelRatio <= 1）？ 'no-retina'：'retina';'在腳本標記中，幷包裹你的scss選擇器'.retina .selector {包括sprite-background（clock_small，0px，2px，0px，-1013px，45px）; }' –

Internet Explorer 8使用視網膜像素媒體查詢

回答

相關問題