Question

虽然标题几乎相同，但我的问题并不是Prevent orientation change in 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";
}

当我旋转设备时，内容消失。有人可以帮助我做这项工作吗？

Answer 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>

注意：它可能与您的问题无关，但我认为您希望Math.abs(window.orientation)代替window.orientation，因为方向可以是-90或90.

防止方向改变

1 个答案: