How can I prompt user to rotate device if in a certain mode landscape or portrait, similar to GameInformer App

Question

I have a website that is best viewed in Landscape mode. How can I have it so if the user loads the website in landscape mode it is fine but if it loads in Portrait mode or they

Answer 1

I see you tagged the question with responsive-design so thought I could offer a solution that doesn't require Javascript and can be done with just CSS.

Knowing that there are two different screen sizes available when switching between landscape and portrait mode, you can use a media query to show and hide an overlay:

HTML:

<div id="content">
    <p>Integer velit nulla, condimentum vitae risus ut, rhoncus vulputate quam. Fusce lacus elit, accumsan eu dolor vel, scelerisque pretium turpis. Vivamus ac lectus vitae enim lacinia fringilla vel id tellus. Curabitur pharetra tortor eget risus ornare scelerisque. Morbi tempus et felis vitae venenatis. Suspendisse vitae ultrices est, nec sagittis arcu.</p>
</div>

CSS:

#rotate {
    display: none;
}

@media screen and (max-width: 300px) {
    #rotate {
        background-color: rgba(0,0,0,0.5);
        display: block;
        height: 100%;
        position: absolute;
        top: 0;
        width: 100%;
    }
}

All this does is check the available width and if it is 300px or less, it will show the content that overlays. If the available width is greater than 300px, it will hide the content. You can adjust this value for the different widths of a mobile device to check if it's in portrait or landscape mode.

You can test this on jsfiddle by moving the vertical bar in the middle to make the preview window bigger and small: http://jsfiddle.net/wv6Vp/

Answer 2

Instead of jQuery/JS you can use CSS with a styled div container instead, which is only shown when the device is in portrait mode.

You can catch the orientation with a media query

Example:

/* for all screens */
#info {display: none;}

/* only when orientation is in portrait mode */
@media all and (orientation:portrait) {
    #info {
         display: block;
    }
}