How to Lock a Responsive Page in Portrait(Picture)?

Question

Is there any solution to display the web page always in Portrait(portrait) on mobile devices, even if the user turns to Landscape(landscape) mode? That is, always leave locked in Portrait.

Answer 1

You can try to run the body of your page or certain div that it involves, in the event "orientationchange" using jquery:

$(window).bind("orientationchange", function(){
    var orientation = window.orientation;
    var new_orientation = (orientation) ? 0 : 180 + orientation;
    $('body').css({
        "-webkit-transform": "rotate(" + new_orientation + "deg)",           //Chrome
        "-moz-transform": "rotate(" + new_orientation + "deg)",              //Firefox
        "-o-transform": "rotate(" + new_orientation + "deg)",                //Opera
        "-ms-transform": "rotate(" + new_orientation + "deg)",               //IE's novos
        "transform": "rotate(" + new_orientation + "deg)",                   //nativa
        "filter": "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)" //IE's antigos
    });
});

Instead of assigning the event to "orientationchange" you can also choose to use the event "resize" also works.

Reference:

• Response in the SOEN
• credits to the response of @Onosendai by the old IE filter I had forgotten :P

Answer 2

So far (and as far as I know) it is not possible to perform this mechanics natively. There is a Webapi proposal called Screen.Lockorientation that would meet this requirement by locking the browser at specific rotations.

In theory this behavior can be emulated via media queries and the CSS property Transform.

The property to be checked via media queries is the orientation, as in the example below:

@media (orientation: landscape) { 
    #content {
    -webkit-transform: rotate(-90deg);
    /* Firefox */
    -moz-transform: rotate(-90deg);
    /* IE */
    -ms-transform: rotate(-90deg);
    /* Opera */
    -o-transform: rotate(-90deg);
    /* Internet Explorer */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

    /* final spec */
    transform: rotate(-90deg);
    }

}

Answer 3

One solution is a warning for the user to leave the device in portrait mode.

Create a div position: Fixed that covers the entire content of the page, and place a notice saying that the site is only displayed correctly in portrait mode. After that, use the following CSS code to show/hide:

@media only screen and (orientation:portrait){
#aviso { display:none; }
}

@media only screen and (orientation:landscape){
#aviso  { display:block; }
}

I used this method in a recent project, and it worked perfectly.