Skip to content

Instantly share code, notes, and snippets.

@callmephilip
Created September 4, 2012 21:21
Show Gist options
  • Save callmephilip/3626669 to your computer and use it in GitHub Desktop.
Save callmephilip/3626669 to your computer and use it in GitHub Desktop.
[JavaScript] Lock site in portrait mode in mobile Safari
// Kudos to Grumdrig
// http://stackoverflow.com/questions/1207008/how-do-i-lock-the-orientation-to-portrait-mode-in-a-iphone-web-application
$(document).ready(function () {
function reorient(e) {
var portrait = (window.orientation % 180 == 0);
$("body > div").css("-webkit-transform", !portrait ? "rotate(-90deg)" : "");
}
window.onorientationchange = reorient;
window.setTimeout(reorient, 0);
});
// CSS
body > div { -webkit-transition: all 1s ease-in-out; }
//-------------------------------------------------------------------------------------------------------
// alternative approach (http://snook.ca/)
// http://stackoverflow.com/questions/5298467/prevent-orientation-change-in-ios-safari
window.addEventListener('onorientationchange', 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);
// CSS
.orientleft #shell {
-webkit-transform: rotate(-90deg);
-webkit-transform-origin:160px 160px;
}
.orientright #shell {
-webkit-transform: rotate(90deg);
-webkit-transform-origin:230px 230px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment