Prevent orientation change in iOS Safari

by

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…

More Related Contents:

  1. Programmatically selecting text in an input field on iOS devices (mobile Safari)
  2. Impossible to hide navigation bars in Safari iOS 7 for iPhone/iPod touch
  3. Video auto play is not working in Safari and Chrome desktop browser
  4. iOS JavaScript bridge
  5. HTML5 Canvas drawImage ratio bug iOS
  6. Programmatically play video with sound on Safari and Mobile Chrome
  7. Invoke native date picker from web-app on iOS/Android
  8. Why can’t JavaScript .play() audio files on iPhone safari?
  9. Is “localStorage” in Firefox only working when the page is online?
  10. Why aren’t Safari or Firefox able to process audio data from MediaElementSource?
  11. Can I use Javascript to get the compass heading for iOS and Android?
  12. How can I request an increase to the HTML5 localstorage size on iPad, like the FT web app does?
  13. Prevent iOS bounce without disabling scroll ability
  14. createImageBitmap alternative on Safari
  15. How to detect device name in Safari on iOS 13 while it doesn’t show the correct user agent?
  16. How do I hide the address bar on iPhone?
  17. How to open Safari from a WebApp in iOS 7
  18. Low power mode detection in JavaScript for iOS11?
  19. Does “localStorage” in Firefox only work when the page is online?
  20. onclick=”location.href=’link.html'” does not load page in Safari
  21. Unescape HTML entities in JavaScript?
  22. Resizing an image in an HTML5 canvas
  23. Check if an element contains a class in JavaScript?
  24. In HTML5, is the localStorage object isolated per page/domain?
  25. How to prevent a click on a ‘#’ link from jumping to top of page?
  26. How to prevent an HTTP request just for a favicon?
  27. Why does JavaScript navigator.appName return Netscape for Safari, Firefox and Chrome?
  28. scrollIntoView vs moveToElement
  29. submit event does not fire if submit initiated programmatically
  30. Google Apps Script HTML Form

Leave a Comment