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

我正在开发一款嵌入Wordpress首页的文字游戏，该游戏用于绘制游戏板及其上下——很少有jQuery元素，如按钮和selectmenu

虽然我进展顺利，但有一个问题我不知道如何解决，我想知道其他PIXI开发人员是如何解决的——硬编码画布大小（我已将其设置为1020 x 1080）对于某些浏览器来说太大了

例如，下面是我的Macbook Air上的两个谷歌Chrome屏幕截图：

此外，我计划将我的游戏嵌入Facebook画布，这将使屏幕资源更加稀缺

这里是我的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);

---

使用

window.innerWidth

和

window.innerHeight

使您的

board

元素的大小达到最佳

我的解决方案是这样的（只使用原始画布，不使用框架）

您也可以直接使用PIXI

renderer.resize（）

更改棋盘的大小，但我不确定哪一个更正确。

有，但它不会缩放游戏棋盘

Uisng：

renderer.view.style.width  = ...... + 'px';
renderer.view.style.height = ...... + 'px';

工作良好，可扩展内容

此外，我还发现了与PIXI合作良好的方法：

$('#board').resizable({
       aspectRatio: 1020 / (1020 + 60),
       minWidth: 1020 / 2
});

$('#board').resizable({
       aspectRatio: 1020 / (1020 + 60),
       minWidth: 1020 / 2
});