Javascript iPad画布旋转

我创建了一个canvas元素，并使用javascript使其在视口中尽可能大，同时保持纵横比

旋转iPad时，设备首先旋转页面，然后启动调整大小事件

问题是，如果你从横向（大约800px宽）到纵向（大约400px宽），身体的一部分不会显示出来，因为当时还没有调整大小。在此之后，“调整大小”事件将画布调整为正确的大小，但画布（文档）的一部分仍在视口之外

因此，问题基本上是存在的，因为调整大小事件只有在iPad已经切断身体两侧的一部分后才会启动，因为身体太宽了

---

我可以通过在画布上设置一个边距来补偿，但这是一个肮脏的解决方案。。。有谁有更好的建议吗？

这也可能被认为是一个肮脏的解决方案，但在过去，我使用了

setTimeout

来处理这个问题，它似乎总是可靠的

window.onorientationchange = function() {
    canvasResize();
}

function canvasResize() {
    window.setTimeout(function () {
        //Your code here based on new size
    }, 100);
}

或者，如果您正在寻找一个稍微不太脏的解决方案，您应该能够自己跟踪视口宽度，然后等待更改后再进行更新。将以下内容添加到脚本的某个位置：

var viewportWidth = window.innerWidth;

并更改画布大小：

function canvasResize() {     
    if(window.innerWidth != viewportWidth) {//Dimensions have changed for sure
        viewportWidth = window.innerWidth; //Update viewportWidth for future use
        //Your code here based on new size
    }
    else {
        //Delay and try again
        window.setTimeout(function () {
            canvasResize();
        }, 100);
    }
}

这两种方法都很快又脏，如果有更优雅的解决方案，我会很感兴趣，但我还没有找到