如何防止iPad上javascript中的@2x图像缩放？

我正在使用html

和javascript开发一个网络游戏。游戏还必须在iPad上运行，最好是视网膜和非视网膜显示器。在这个游戏中，我使用一个精灵表png。此精灵表宽3500像素，高3700像素

在我的游戏逻辑中，我使用canvas'

context.drawImage（）

抓取精灵并将其绘制到我的画布中。在桌面浏览器中，这一切都很好，一切都很好。在retina iPad上，图像仅以其大小的四分之一加载，这使得我的许多

drawImage（）

调用失败，认为它们试图捕获加载图像边界之外的像素。（如果我在1200、1400位置抓到一个精灵，iPad认为我的图像比这个小，就会抛出索引大小错误。）

例如，下面编写的代码就是我在项目中拥有的代码。当提醒宽度和高度时，我得到的结果是875像素宽925像素高-正好是原始图像大小的1/4

spritesheet = new Image();
spritesheet.onload = function() {
    splashInterval = setInterval(renderFrame, 30);
    alert(spritesheet.width); // returns 875 on retina iPad
    alert(spritesheet.height); // returns 925 on retina iPad
};
spritesheet.src = "/spritesheet.png";

视网膜显示器的正常解决方案是创建一个尺寸增大的图像，这样当iPad缩小尺寸时，一切都很好。然而，根据上面报告的尺寸，我必须创建一个宽度和高度为4倍的图像。这使得图像的宽度为14000像素，高度为14800像素。即使是纯白jpg，该图像也无法保存在Photoshop中，据Gimp报告，其大小为1.9GB。当然，这不是一个解决方案

因此，我的问题是：有没有办法防止iPad视网膜显示器缩小通过Javascript加载的图像的尺寸？当我加载3500x3700像素的图像时，我需要它保持在3500x3700像素，这样我的

context.drawImage（）

调用就可以正常工作

---

任何和所有的想法将不胜感激。谢谢

您可以使用以下方法确定显示器是否为视网膜显示器：

var retina = window.devicePixelRatio > 1 ? true : false;

if (retina) {
    // the user has a retina display
    // do something

}
else {
    // the user has a non-retina display
    // do something else 
}

---

这是最简单的部分！：）一旦我弄清楚自己在视网膜显示器上的时间，我如何加载图像并保持所需的图像尺寸？不幸的是，试图按照视网膜缩放的方式提供14000像素的图像是行不通的。当它显示视网膜时，应该运行什么功能？我发现很难找到你的问题。你能告诉我当它是视网膜和wat时应该加载什么像素吗？雪上加霜的是，我注意到iPad3 retina mobile safari和mac上的safari在处理画布和devicePixelRatio时，在上下文图像数据大小方面有所不同。更新到上面*显然，这是safari 6中针对OSX修复的错误。现在，桌面视网膜的功能类似于iPad和iPhone。我最终使用的解决方案是将我的spritesheet拆分为多个更小的spritesheet（文件大小和像素大小都更小）。当图像在任意方向上都小于3000像素左右时，iPad retina不会尝试缩小图像的大小，这会更正通过

.width（）

和

.height（）

报告的宽度和高度。