iOS Web App：随着方向变化旋转身体答案

【问题标题】：iOS Web App: Rotate the body with the orientation changeiOS Web App：随着方向变化旋转身体
【发布时间】：2012-11-26 09:15:30
【问题描述】：

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

【问题讨论】：

标签： javascript html ios css orientation

【解决方案1】：

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

 -webkit-transform:rotate(180deg);

【讨论】：

【解决方案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)”，只是为了考虑状态栏而进行的粗略调整。相应调整

【讨论】：