sencha touch 上未加载 Retina 图像答案

【问题标题】：Retina Images not being loaded on sencha touchsencha touch 上未加载 Retina 图像
【发布时间】：2014-05-14 01:49:44
【问题描述】：

我在我的 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 创建和加载的事实有关（图像不存在 onload）

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

【问题讨论】：

标签： sencha-touch 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;
  }
});

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

【讨论】：