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:

    
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.

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/