Menu
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?
463
Swipe down from the top-right corner of your screen to open Control Center. Tap the Portrait Orientation Lock button to make sure that it's off.
Simply turn your Apple® iPhone® to change the view. Access the Contol Center by swiping downward from the upper-right corner of the Home or Lock screen. For the iPhone with Touch ID, access the Control Center by touching the bottom of any screen then dragging upward. to lock or unlock screen portrait orientation.
If you don't want the screen to switch between portrait and landscape when you move the device, you can lock the screen orientation. To do this, swipe down from the right side of the top panel. Hold the device in the orientation in which you want it locked. On the drop-down menu, touch the “Auto Rotate” button.
Jonathan Snook has a work around to this problem. In his slides here, he shows how to (sort of) lock to portrait (see slide 54 and 55).
The JS code from those slides:
window.addEventListener('orientationchange', function () { if (window.orientation == -90) { document.getElementById('orient').className = 'orientright'; } if (window.orientation == 90) { document.getElementById('orient').className = 'orientleft'; } if (window.orientation == 0) { document.getElementById('orient').className = ''; } }, true); and the CSS:
.orientleft #shell { -webkit-transform: rotate(-90deg); -webkit-transform-origin:160px 160px; } .orientright #shell { -webkit-transform: rotate(90deg); -webkit-transform-origin:230px 230px; } I tried to get this working for landscape on the iPhone, but it never looked 100% correct. I came close with the following jQueryian code, however. This would be within the onready function. Also note: this was within a "saved to homescreen" context, and I think that altered the position of the tranform-origin.
$(window).bind('orientationchange', function(e, onready){ if(onready){ $(document.body).addClass('portrait-onready'); } if (Math.abs(window.orientation) != 90){ $(document.body).addClass('portrait'); } else { $(document.body).removeClass('portrait').removeClass('portrait-onready'); } }); $(window).trigger('orientationchange', true); // fire the orientation change event at the start, to make sure And the CSS:
.portrait { -webkit-transform: rotate(90deg); -webkit-transform-origin: 200px 190px; } .portrait-onready { -webkit-transform: rotate(90deg); -webkit-transform-origin: 165px 150px; } Hope that helps someone get close to the desired result...
124
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.
33
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
