1 min read
How to lock the orientation to portrait mode in a iPhone/Andorid Web Application?
You can specify CSS styles based on viewport orientation: Target the browser with body[orient=”landscape”]
or
body[orient=”portrait”]
or
body[orient=”portrait”]
Try this via the CSS @viewport rule
@viewport {
orientation: portrait;
}
Or
$(document).ready(function () {
$(window)
.bind('orientationchange', function(){
if (window.orientation % 180 == 0){
$(document.body).css("-webkit-transform-origin", "")
.css("-webkit-transform", "");
}
else {
if ( window.orientation > 0) { //clockwise
$(document.body).css("-webkit-transform-origin", "200px 190px")
.css("-webkit-transform", "rotate(-90deg)");
}
else {
$(document.body).css("-webkit-transform-origin", "280px 190px")
.css("-webkit-transform", "rotate(90deg)");
}
}
})
.trigger('orientationchange');
});
