javascript - 如何使 PIXI 渲染器适应浏览器的宽度和高度？

Question

我正在开发一个嵌入 Wordpress 首页的文字游戏，它使用 PIXI.js绘制游戏板及其上方和下方 - 一些 jQuery 元素，如按钮和选择菜单。

虽然我进展顺利，但有一个问题我不知道如何解决并且想知道其他 PIXI 开发人员如何解决它 - 硬编码的 Canvas 大小(我已将其设置为 1020 x 1080)对于某些浏览器来说太大了.

例如，这是我的 Macbook Air 上的 2 个 Google Chrome 屏幕截图:

此外，我计划将我的游戏嵌入到 Facebook Canvas 中，这将使屏幕空间更加稀缺。

这是我的 JavaScript 代码的摘录，请问如何改进它？

    var renderer = new PIXI.autoDetectRenderer(1020, 1020 + 60, { 
            view: document.getElementById('board')
    });
    renderer.view.style.padding = '4px';
    renderer.backgroundColor = 0xFFFFFF;

    var charm = new Charm(PIXI);

    var stage = new PIXI.Sprite();
    stage.interactive = true;
    stage
            .on('mousedown',  onDragStart)
            .on('touchstart', onDragStart)
            .on('mousemove', onDragMove)
            .on('touchmove', onDragMove)
            .on('mouseup',         onDragEnd)
            .on('mouseupoutside',  onDragEnd)
            .on('touchend',        onDragEnd)
            .on('touchendoutside', onDragEnd);

Answer 1

使用 window.innerWidth 和 window.innerHeight 使您的 board 元素尺寸最佳。

我的解决方案看起来像这样(只使用原始 Canvas ，没有框架)

var context = document.getElementById('game');
function gameResize()
    {
    if (window.innerWidth/window.innerHeight > 1280/720)
        {
        context.height = window.innerHeight;
        context.width = 1280*context.height/720;
        }
    else
        {
        context.width = window.innerWidth;
        context.height = 720*context.width/1280;
        }
    }

你也可以直接改变board的大小，也可以用PIXI renderer.resize()，但我不确定哪个更正确。