2

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

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

问题是，如果你从横向（大约 800 像素宽）到纵向（大约 400 像素），身体的一部分没有被显示，因为那时还没有调整大小。在此之后，resize 事件将画布的大小调整为正确的大小，但是画布（和文档）的一部分仍然在视口之外。

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

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

4

1 回答 1

1

这也可以被认为是一个肮脏的解决方案，但过去我曾使用 asetTimeout来处理这个问题，而且它似乎总是可靠的。

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

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

或者，如果您正在寻找一个不太脏的解决方案，您应该能够自己跟踪视口宽度，然后等到更改后进行更新。在某处添加到您的脚本中：

var viewportWidth = window.innerWidth;

并改变canvasResize：

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);
    }
}

两者都非常快速和肮脏，如果有更优雅的解决方案我会很感兴趣，但我还没有找到一个。

于 2012-04-19T14:50:12.753 回答