Can we make our webpage open defaultly in landscape mode for mobile/tablets using media query/js/jquery?

Question

Is it possible to make my web page open default in landscape mode in a mobile or tablet even if the orientation of screen is off using css3 media query or jquery ??

Answer 1

You COULD do this. Wether it is a good idea or not I'll let you decide (hint: it isn't).

Check for portrait orientation with CSS and rotate the body if necessary:

@media screen and (orientation:portrait) {
    body {
        transform: rotate(-90deg);
        transform-origin: 50% 50%;
}

rotating the body in this way will not cause it's width and height to update to suit it's new orientation so we will have to correct this with JQuery:

function checkOrientation() {
    var winWidth = $(window).width();
    var winHeight = $(window).height();

    if (winHeight > winWidth) {
        $('body').width(winHeight).height(winWidth); // swap the width and height of BODY if necessary
    }
}

checkOrientation(); // Check orientation on page load

// Check orientation on page resize (mainly for demo as it's unlikely a tablet's window size will change)
var resizeEnd;
$(window).resize(function(){ 
   clearTimeout(resizeEnd);
   resizeEnd = setTimeout(checkOrientation, 100);
});

---

DEMO (resize the preview panel)

---

DISCLAIMER: Not tested in anything but Chrome.