0

Although the title is almost the same, my question is not a duplicate of Prevent orientation change in iOS Safari (I changed the answer to make the code below)

I wrote the code below so if the user rotate the iPad/iPhone/iPod, I rotate the content so he will be obliged to rotate the device to see normally the content.

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";
}

When I rotate my device, the content disappear. Can someone help me to make this work?

Community
  • 1
  • 1
user1365010
  • 3,185
  • 8
  • 24
  • 43

1 Answers1

1

I think your problem here is your transform origin, it should be at the middle of your content instead of the top corner. When you apply the transform origin at corner, it will rotate your div outside the visible zone and it's why you saw nothing. Also there are other modification you need to apply to your div if you want it to have the same shape.

Here's a quick example that should work and do what you want

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

Note : It might not be related to your problem, but I think you want to do Math.abs(window.orientation) instead of window.orientation, since the orientation can be -90 or 90.

HoLyVieR
  • 10,985
  • 5
  • 42
  • 67