javascript - iOS Web App: 向きの変化に合わせて体を回転させる

Question

ピクセル単位で完全に設計した iOS Web アプリ ゲームがあるため、ポートレート モードでのみ動作します (ランドスケープ モードではゲームの半分が画面の下に表示されます)。ユーザーがデバイスを回転させると、Web アプリも回転し、ユーザーが回転させてポートレート モードに戻すようにしたいと考えています。「window.onorientationchange」を使用して向きの変更を検出できること、および orient CSS 属性を使用して向きに基づいてスタイルを変更できることを知っています: body[orient="landscape"] または body[orient="portrait"]。あとは、レイアウトを維持しながら体全体を回転させる方法を知る必要があります。どんな助けでも大歓迎です！

Answer 1

もう少し研究した結果、ここに私が思いついたものがあります。これは、私の第 5 世代 iPod Touch のフルスクリーン Web アプリ (サファリ ナビゲーション バーが大きすぎる) で機能します。

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)';
    }
}

"(center[0]-30)" のように、webkitTransformOrigin で変更された中心座標は、ステータス バーを考慮するための大まかな調整に過ぎないことに注意してください。それに応じて調整する

Answer 2

css を使用してボディに回転変換を適用します。

 -webkit-transform:rotate(180deg);