Question

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

Answer 1

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

 -webkit-transform:rotate(180deg);

Answer 2

经过一番研究，这是我想出来的。这适用于我的第五代iPod Touch上的全屏网络应用程序（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）”，只是粗略调整以考虑状态栏。相应调整

iOS Web App：使用方向更改旋转主体

2 个答案: