Not show landscape mode on Website

Question

I'm trying to make a way for my website to not allow the landscape mode in smart phone devices because my application is absolutely not designed for the "landscape" mode. How can I do that ?

any suggestions ? thanks

Answer 1

You have no control over the user moving the orientation however you can at least message them. This example will hide the wrapper if in portrait mode and show the warning message and then hide the warning message in landscape mode and show the portrait.

  <style type="text/css">
        #warning-message { display: none; }
        @media only screen and (orientation:portrait){
            #wrapper { display:none; }
            #warning-message { display:block; }
        }
        @media only screen and (orientation:landscape){
            #warning-message { display:none; }
        }
    </style>

    ....

<div id="wrapper">
    <!-- your html for your website -->
</div>
<div id="warning-message">
    this website is only viewable in landscape mode
</div>