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 rotate from Landscape to Portrait mode a image or something popups up taking up the entire screen asking them to rotate back to landscape? Thinking Javascript/jQuery can do this.

I have seen this done on my iPad with the Game Informer app where if the user opens the app in Portrait or rotates from Landscape to Portrait a opaque image pops up asking them to rotate back to landscape. [see iPad screenshot]

Answer 1

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