视网膜图像不加载感受器触摸

Question

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

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

使用chrome模仿iphone，这就是我所看到的

​

我也手动运行Retina.init(window)，但是什么都没有发生。所有图像都是非视网膜的。运行Retina.isRetina()返回真

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

The 文档不是很有用

我认为这与这样一个事实有关:图像是用JS创建和加载的(图像没有加载)。

使用铬进行调试，我如何使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。