Question

这是我第一次为移动设备开发html5。我希望我的应用程序能够通用，所以它需要考虑视网膜显示以及正常显示。

我正在运行此代码，它似乎在iPhone3G（普通显示屏）和iPhone5（视网膜显示屏）上都很好看：

function Setup(){

    $('canvas').css('width', window.innerWidth + 'px');
    $('canvas').css('height', window.innerHeight + 'px');

    if(window.devicePixelRatio == 2) {
        canvas.setAttribute('width', window.innerWidth * 2);
        canvas.setAttribute('height', window.innerHeight * 2);
        ctx.scale(2, 2);
    }
    else{
        canvas.setAttribute('width', window.innerWidth);
        canvas.setAttribute('height', window.innerHeight);
        ctx.scale(1, 1);
    }

    Draw();

}

我真的只是想知道我是否正确的方式？一切看起来都很好，但我不想在经过几天的工作和编码后发现，这是一个错误/糟糕的方法。

另外，据我所知，我需要2个版本的图像，例如：普通屏幕为32x32图像，视网膜为64x64，但我需要将图像缩小50％。正确的吗？

感谢。

Answer 1

ctx.scale可能会起作用，但可能会使你的图像看起来像狗屎。 streched。

当然你可以使用视网膜尺寸的图像并缩小尺寸，但是你会在非视网膜设备上投入额外的工作量 - 比如3gs - 已经是懒散的。

我使用的方法是：

myCanvas.width = 300;
myCanvas.height = 300;

// you can use variables to get this value: width * window.devicePixelRatio
myCanvas.style.width = "600px";
myCanvas.style.height = "600px";

当然，您还需要通过window.devicePixelRatio！

扩展所有输入

HTML5电话应用程序 - 重新定制视网膜

1 个答案: