虽然标题几乎相同,但我的问题不是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";
}
当我旋转我的设备时,内容消失了。 有人可以帮助我完成这项工作吗?
最佳答案
我认为你的问题是你的变换原点,它应该在你的内容的中间而不是顶 Angular 。当您在 Angular 落应用变换原点时,它会将您的 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。
关于javascript - 防止方向改变,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10865179/