Javascript iOS Web应用程序：随方向更改旋转身体

我有一个iOS网络应用程序游戏，我设计的pixel非常完美，所以它只能在纵向模式下工作（一半游戏在横向模式下在屏幕下方）。我想这样做，如果用户旋转设备，web应用程序也会旋转，迫使用户将其旋转回纵向模式。我知道我可以使用“window.onorientationchange”检测方向变化，并且我可以使用orient CSS属性：body[orient=“landscape”]或body[orient=“grait”]根据方向改变样式。现在我只需要知道如何在保持布局的同时旋转整个身体。任何帮助都将不胜感激

使用css对主体应用旋转变换

 -webkit-transform:rotate(180deg);

---

经过更多的研究，以下是我得出的结论。这在我的第五代iPod Touch上的全屏web应用程序（safari导航栏太大）中起作用

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

//finds the center of a 90 degree rotation based on the current and projected coordinates of a point, and if the rotation is clockwise or not
function findCenter(curr, next, clockwise) {
    midLenX = (next[0] - curr[0])/2;
    midLenY = (next[1] - curr[1])/2;
    centerX = curr[0] + midLenX + ((clockwise)? -midLenY : midLenY);
    centerY = curr[1] + midLenY + ((clockwise)? midLenX : -midLenX);
    return [centerX,centerY];
}

function reorient() {
    if (window.orientation %180 == 0) { //portrait mode, reset rotation
        document.body.style.webkitTransform = "";
    } else if (window.orientation == -90) { //clockwise rotation
        var center = findCenter([0,0], [960,0], true);
        document.body.style.webkitTransformOrigin = center[0] + "px " + (center[1]-10) + "px";
        document.body.style.webkitTransform = 'rotate(90deg)';
    } else { //counterclockwise rotation
        var center = findCenter([0,0], [0,640], false);
        document.body.style.webkitTransformOrigin = (center[0]-30) + "px " + (center[1]-20) + "px";
        document.body.style.webkitTransform = 'rotate(-90deg)';
    }
}

请注意，WebKittTransferMorigin中修改后的中心坐标，如“（中心[0]-30）”，只是对状态栏的粗略调整。相应地调整它