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 can i make these tabs Responsive

    How to show/hide content on click with CSS

    How to create the + button with CSS?

    How to display print preview as same as the webpage using css?

    How semantic X/HTML can save time when we will write CSS?

    How do I keep my input fields on one line while centering the DIV that contains them?

    How to animate DOM elements with JavaScript/CSS

    How to reserve 'width' for a 'hide' element

    How to use grunt sass to compile and compress scss to css?

    How to display element on screen but not at the top of the screen in html/css?

    How to attach for every Array-Element in jQuery different Animationeffects? And animate one by one forwards and backwards with 2 Buttons(back&next)?

    How to add custom css/js to just one page in WordPress?

    How to add text to different parts of chart made from css, html, and javascript?

    how to select :after element using jquery

    how to make a lighting effect using css/html/js [closed]

    How to apply css class for selected element in jquery or javascript?

    How can I reposition an entry form and button correctly on a background image?

    How to position this div next to others?

    CSS: How to make a responsive grid without a framework

    CSS how to make a fixed height?

    How to add vertical gradient using css?

    How do I make this Javascript checkbox trigger action work like my CSS only example

    How to display a div on hover of button using css

    How to make a visible rectangular frame in CSS to contain some sections of my view?

    How to create a header which fills the background with a color throughout the width

    How to implement a table structure using CSS

    How do I stop Bootstrap Input Boxes and Buttons from overlapping the header and footer of a page when scrolling?

    CSS! Horizontal resizable menu ul li, how to spread it on full width of the display?

    How can I target a element inside h2

    How do I get only two form fields to show instead of all 5 on initial page load? CSS