Internet Explorer 8 使用 Retina pixelratio 媒体查询

Question

我正在使用 SASS/Compass 构建一个响应式网站，其中包括视网膜图标（使用生成的精灵）。我在我的 .scss 中包含了带有 mixin 的图标。

我的视网膜图标混合：

// 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 你可以找出你当前的像素比：

alert(window.devicePixelRatio);

此警报：undefined 在 Internet Explorer 中。 为什么我的“视网膜媒体查询”接受undefined 作为有效数字，并执行它的 css？有什么解决方法吗？

Answer 1

如果未定义，您可以为 devicePixelRatio 分配默认值

window.devicePixelRatio = window.devicePixelRatio || 1