How to say that you need to turn your mobile phone in javascript/css? [closed]


Tags: javascript,html,css,css3

Problem :

I have a website wich you can only view on a horizontal way. But i don't know how to block it if it is vertical. I just can't figure out... Can anyone help me with this?



Solution :

You can do this in CSS by hiding/showing dependant on orientation

<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>

SOURCE forcing web-site to show in landscape mode only


    CSS Howto..

    How to set a div's position inside another div to bottom right corner?

    How to create multiple spoiler buttons

    How to center checkbox vertically in a table-cell?

    How to apply CSS to the first letter after :before content?

    How do I get pictures side by side (responsive)

    How to make a DIV float on top of another DIV without pushing down the CSS Underneath

    how to align the content to center of page using css

    How to create a full width background image with a variable height depending on content?

    How to change text transparency in html/css?

    How to specify multiple hover event targets in CSS?

    HTML/CSS/JS: How to force browser to save password from a non-'password' type input?

    How to over-ride img-width from bootstrap? Set css rule to null?

    how do I select a single tag in the middle of many of the same in CSS?

    How To Isolate a div from public CSS styles?

    How show button hovering above an image or pressing over it? [closed]

    How to keep text in same position?

    How to get conditional css to work on Blogger/Blogspot?

    How do I line up my textboxes without using a table? html/css

    How to set the jquery draggable with margin left?

    How to center this stuff inside a link using CSS?

    How do i shift the text in twitter bootstrap navbar to center?

    how to prevent css animation from running on page load

    how to change CSS styles dynamically using php/Mysql..i want to create themes that are unique to each user?

    How To Get Circle Image Between
    Tag Like Tumblr In HTML? [closed]

    How to understand this CSS Menu Demo? [closed]

    CSS how to vertically align text within a pseudo element

    Newbie CSS/HTML: How to add ad in a div container to the side of the page?

    How to set minimum height to the 100% of the viewing screen and half of the page?

    How to get an input set to display block to fade in with css

    How do I get my textboxes to align properly once triggered? - jQuery/CSS