iPad canvas旋转
问题描述:
我创建了一个canvas元素,我使用javascript在视口中使其尽可能大,同时保持纵横比。iPad canvas旋转
当您旋转iPad时,设备首先旋转页面,然后才启动调整大小事件。
问题是,如果你从风景(大约800px宽)到肖像(大约400px),身体的一部分没有被显示,因为调整大小在那一刻还没有发生。之后,resize事件将画布大小调整为正确的大小,但之后画布的一部分(&文档)仍位于视口之外。
所以基本上存在这个问题,因为调整大小事件仅在iPad已经切断身体两侧的一部分后才会启动,因为身体太宽。
我可以通过在画布上设置边距来弥补这个问题,但这是一个肮脏的解决方案......没有人有更好的建议吗?
答
这也可以被认为是一个肮脏的解决方案,但在过去,我用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);
}
}
两者都是相当快速和肮脏的,和我有兴趣,如果有一个更优雅的解决方案,但我没有找到一个呢。