Javascript 如何缩放游戏视口？

我使用HTML5/CSS/JS制作游戏。现在我有一个我无法解决的问题如何将游戏缩放到任何屏幕分辨率？可能很简单，但对我来说不是

已解决

var RATIO = 480 / 800; // Original ratio.
function resize() {
    var DEVICE_WIDTH = window.innerWidth,
        DEVICE_HEIGHT = window.innerHeight,
        ratio = DEVICE_WIDTH / DEVICE_HEIGHT,
        scale = 1;
    // If window changes by height we calculate scale parameter fo width
    if (ratio > RATIO) { 
        scale = DEVICE_HEIGHT / 800; // Devide by original viewport height
    } else { // If window changes by width we calculate scale parameter for height
        scale = DEVICE_WIDTH / 480; // Devide by original viewport width
    }
}

// So, now you can continue make your game, but in draw method you have to multiply 
// everything by this scale parameter (x and y coords, width and height)

---

希望它能对像我这样的人有所帮助：）

假设您已将画布命名为

canvas

。在不拉伸的情况下更改其大小的代码如下：

function setSize(width, height)
{
    canvas.width = width; 
    canvas.style.width = width + "px";
    canvas.height = height; 
    canvas.style.height = height + "px";
}

//And then to use that,
setSize(350, 200);

---

您可以根据需要动态设置它，例如，如果您的容器有一些id或类，您可以

var container = document.getElementById(idName);

var resize = function(element) {
    return function (width, height) {
          element.style.width = width;
          element.style.height = height;
     }
}

var sizeListener = resize(container)(document.documentElement.clientWidth,document.documentElement.clientHeight);

---

请阅读，但如何缩放容器的对象，场景对象？我不使用这个游戏的画布，CSS只。如何将所有内容缩放到适当的分辨率？谢谢你的回答：）哦，天哪，缩放html游戏？我想我不会给任何东西一个固定的宽度。给它一个百分比。如果这不起作用，您可能需要使用javascript来完成