0

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

4

2 回答 2

0

使用 css 对身体应用旋转变换。

 -webkit-transform:rotate(180deg);
于 2012-12-08T08:55:34.927 回答
0

经过更多的研究，这就是我想出的。这适用于我的第 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)”，只是为了考虑状态栏而进行的粗略调整。相应地调整它

于 2012-12-10T00:27:42.857 回答