0

タイトルはほぼ同じですが、私の質問はiOS Safari での向きの変更を防止する の重複ではありません(以下のコードを作成するように回答を変更しました)。

以下のコードを書いたので、ユーザーが iPad/iPhone/iPod を回転させた場合、コンテンツを回転させて、コンテンツを正常に表示するためにデバイスを回転させる必要があります。

if(window.orientation==90)
{
    document.getElementById("orient").style.webkitTransform="rotate("+window.orientation+"deg)";
    document.getElementById("orient").style.webkitTransformOrigin="0px 0px";
    document.getElementById("orient").style.top=screen.height+"px";
}

デバイスを回転させると、コンテンツが消えます。誰かがこれを機能させるのを手伝ってくれますか?

4

1 に答える 1

1

ここでの問題は、変換元にあると思います。それは、コンテンツの上隅ではなく、中央にあるはずです。コーナーで変換原点を適用すると、div が可視ゾーンの外で回転するため、何も表示されません。また、同じ形状にしたい場合は、divに適用する必要がある他の変更があります。

これは、機能し、必要なことを行う簡単な例です

<div id="all" style="-webkit-transform: rotate(90deg); -webkit-transform-origin: 50% 50%; position:absolute; width: 100%; height: 100%;">
    Lorem ipsum dolor sit amet ...
</div>

<script type="text/javascript">
    var all = document.getElementById("all");

    all.style.height = window.innerWidth + "px";
    all.style.width = window.innerHeight + "px";
    all.style.top = (window.innerHeight - window.innerWidth) / 2 + "px";
    all.style.left = (window.innerWidth - window.innerHeight) / 2 + "px";
</script>

注：あなたの問題とは関係ないかもしれませんが、方向は-90または90になる可能性があるため、Math.abs(window.orientation)代わりにやりたいと思います。window.orientation

于 2012-06-02T20:02:57.757 に答える