Retina Изображения не загружаются на сенсорном Сенча

Я включил retina.js в свое приложение Sencha Touch. При просмотре монитора сети вижу

  • retina.js загружен
  • изображения загружаются нормально example.jpg
  • нет @2x изображений загружены example@2x.jpg или даже искал

Использование хрома для эмуляции iphone это все, что я вижуприставка

Я тоже вручную бегал Retina.init(window) однако ничего не происходит. Все изображения остаются без сетчатки. Бег Retina.isRetina() возвращает истину

У меня нет собственно устройства для сетчатки глаза, поэтому я не уверен, что это проблема. Однако мой друг с iPhone 5s говорит, что качество изображения не улучшилось, поэтому я предполагаю, что изображения на сетчатке не отображаются.

Документация не очень полезна

Я полагаю, что это связано с тем, что изображения создаются и загружаются с помощью JS (изображения не загружаются)

Используя хром для отладки, как я могу заставить retina.js работать для моего приложения?

1 ответ

Решение

ОК, поэтому я использовал небольшую часть retina.js файл и создал новый класс, он использует функцию isRetina, чтобы сообщить погоде, что devicePixelRatio выше 1.

Ext.define('MyApp.Retina', {
  singleton: true,
  isRetina : function(){
    var mediaQuery = "(-webkit-min-device-pixel-ratio: 1.5),\
                      (min--moz-device-pixel-ratio: 1.5),\
                      (-o-min-device-pixel-ratio: 3/2),\
                      (min-resolution: 1.5dppx)";

    if (window.devicePixelRatio > 1)
      return true;

    if (window.matchMedia && window.matchMedia(mediaQuery).matches)
      return true;

    return false;
  },
  getSrc: function(url){
    return this.isRetina()? [url.slice(0, -4), '@2x', url.slice(-4)].join(''): url;
  }
});

Теперь во всем приложении Сенча я создаю изображения с MyApp.Retina.('http://example.com/foo.jpg') в качестве значения src, когда устройство находится на сетчатке, функция возвращает http://example.com/foo@2x.jpg

Другие вопросы по тегам