Up to the present moment (and as far as I know) it is not possible to perform this mechanically 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 property CSS Transform .

The property to be verified via media queries is 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);
    }

}

You can try to run the body of your page or certain div that 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 the "orientationchange" you can also choose to use the "resize" event also works.

Reference:

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

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

Create a div: fixed div that covers the entire contents of the page, and place a warning that the site is only correctly displayed 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.