Search code examples
javascripthtmliossafariorientation

Prevent orientation change in iOS Safari

Is it possible to avoid transition to landscape view in Safari for iOS when the device is rotated?

iOS Safari has the "orentationchange" event, I tried to intercept it and disable the default behavior, like this:

<html>
<head>
<script type="text/javascript">
function changeOrientation(event) {
    alert("Rotate");
    event.preventDefault();
}
</script>
</head>
<body onorientationchange="changeOrientation(event);">
PAGE CONTENT
</body>
</html>

but when testing the page on my iPhone, when I rotate the device the alert is shown, but the view switch to landscape. It seems that event.preventDefault() does not stops the rotation.

Is there a way to block this behavior?

Solution

  • There is no way to force a particular orientation in Mobile Safari; it'll always autorotate when the user rotates their device.

    Perhaps you can display something for unsupported orientations informing the user that the orientations aren't supported, and that they need to rotate the device back in order to use your web app.