iPad canvas旋转

Question

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

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

问题是，如果你从风景（大约800px宽）到肖像（大约400px），身体的一部分没有被显示，因为调整大小在那一刻还没有发生。之后，resize事件将画布大小调整为正确的大小，但之后画布的一部分（&文档）仍位于视口之外。

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

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

Answer 1

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

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

两者都是相当快速和肮脏的，和我有兴趣，如果有一个更优雅的解决方案，但我没有找到一个呢。