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

Question

I have a website that is best viewed in landscape mode. How can I do this if the user loads the website in landscape mode, this is normal, but if he loads in the Portrait mode or they turn from the "Landscape to portrait" mode, the image or something pops up, occupying the entire screen, asking them turn back to the landscape? Thinking Javascript / jQuery can do this.

I saw this on my iPad with the Game Informer application, where if the user opens the application in “Portrait” or rotates with “Landscape to portrait”, an opaque image appears asking to return to the landscape. [cm. iPad screenshot]

Answer 1

Instead of jQuery / JS, you can use CSS with a stylized div container that appears only when the device is in portrait mode.

You can catch the orientation using 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; } } 

Answer 2

I see that you marked the question with responsive-design , so I thought I could offer a solution that does not require Javascript, and can only be done using CSS.

Knowing that when switching between landscape and portrait modes, two different screen sizes are available, you can use the media query to display and hide the 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 is checking the available width, and if it is 300 pixels or less, it displays the content that is overlapping. If the available width is greater than 300 pixels, it will hide the content. You can adjust this value for different widths of the mobile device to check if it is in portrait or landscape mode.

You can check this on jsfiddle by moving the vertical bar in the middle so that the preview window is larger and smaller: http://jsfiddle.net/wv6Vp/