Internet Explorer 8 с использованием мультимедийного запроса retina pixelratio

Я создаю адаптивный веб-сайт с помощью SASS/Compass и добавляю значки сетчатки (используя сгенерированные спрайты). Я включаю значки в свой .scss с миксином.

Моя смесь иконок сетчатки:

// 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? Есть ли обходной путь для этого?


css sass media-queries internet-explorer-8 retina
person Jrn    schedule 11.12.2013    source источник
comment
возможный дубликат Хороший метод для Void Responsive Веб-дизайн/запросы мультимедиа для IE 8 -?   -  person cimmanon    schedule 12.12.2013

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете назначить значение по умолчанию для devicePixelRatio, если оно не определено.

window.devicePixelRatio = window.devicePixelRatio || 1
person Slawa Eremin    schedule 11.12.2013
comment
Я использовал кусок javascript для отладки. Я не могу контролировать свой миксин с ним. У меня проблема в том, что мой медиа-запрос сетчатки считает, что undefined является более высоким числом, чем 1.5, поэтому его css выполняется. - person Jrn; 12.12.2013
comment
Может быть, вы можете попробовать это: document.body.className += !(window.devicePixelRatio) || (window.devicePixelRatio <= 1)? ' no-retina': ' retina'; в теге скрипта и обернуть селектор scss .retina .selector { @include sprite-background(clock_small, 0px, 2px, 0px, -1013px, 45px); } - person Slawa Eremin; 12.12.2013