防止方向改变

Posted

技术标签:

【中文标题】防止方向改变【英文标题】:Prevent orientation change 【发布时间】:2012-06-02 19:16:24 【问题描述】:

虽然标题差不多,但我的问题不是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";

当我旋转我的设备时,内容消失了。 有人可以帮我完成这项工作吗?

【问题讨论】:

【参考方案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。

【讨论】:

它可以从横向到纵向,但不能从纵向到横向

以上是关于防止方向改变的主要内容,如果未能解决你的问题,请参考以下文章

防止方向改变

防止在视图控制器中改变方向

防止 Xamarin Android 应用程序中的方向更改

打开手机键盘(JS)时防止调整大小事件

如何防止自定义视图在屏幕方向更改时丢失状态

iOS View 在方向改变时不会改变方向