iOS Web App：通过改变方向旋转身体

Question

我有一个完美设计了像素的iOS Web App游戏，因此它只能在纵向模式下工作（一半的游戏在横向模式下位于屏幕下方）。 我要这样做，以便如果用户旋转设备，Web应用程序也会旋转，从而迫使用户将其旋转回纵向模式。 我知道我可以使用“ window.onorientationchange”检测到方向变化，并且可以使用orient CSS属性（例如body [orient =“ landscape”]或body [orient =“ portrait”]基于方向更改样式。 现在，我只需要知道如何在保持布局的同时旋转整个身体即可。 任何帮助将不胜感激！

Answer 1

使用CSS将旋转变换应用于身体。

 -webkit-transform:rotate(180deg);

Answer 2

经过更多的研究，这就是我的想法。 这在我的第5代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)';
    }
}

请注意，在webkitTransformOrigin中修改的中心坐标，例如“（center [0] -30）”，仅是对状态栏的粗略调整。 相应地调整