视网膜图像没有加载在sencha触摸上

Question

我在Sencha Touch应用程序中包含了retina.js。在观看网络监视器时，我看到了

• retina.js已加载
• 图像正常加载example.jpg
• 没有加载@ {2x图像example@2x.jpg或甚至查找

使用chrome to emulate an iphone这就是我所看到的

我也手动运行Retina.init(window)但是没有任何反应。所有图像均为非视网膜。正在运行Retina.isRetina()会返回 true

我实际上并不拥有视网膜设备，所以我不确定这是不是问题。然而，我的iPhone 5s的朋友说图像质量没有改善，所以我假设视网膜图像没有出现。

documentation is not very helpful

我认为这与图像是用JS创建和加载的事实有关（图像不在那里上载）

使用chrome进行调试，如何让retina.js适用于我的应用程序？

Answer 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;
  }
});

现在在我的sencha应用程序中，我使用MyApp.Retina.('http://example.com/foo.jpg')作为src值创建图像，当设备是视网膜时，函数返回http://example.com/foo@2x.jpg