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]

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

Solution 2

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/

Comments

[Rob Sterlini]

That will only show a rotation box for screens smaller than 300px. My iPad is 768px wide in portrait so it wouldn't show the rotation info, which is what @kevinorin asked for. Your solution is however better for masking screens that are too small for the content given that an iPhone in landscape would show a page that an iPad in portrait wouldn't with the way that he is asking for.

[cchana]

@RobSterlini yeah, this was just an example to help kevinorin, I said in my answer that the values can be adjusted and I included this in case it needed to be applied to different widths... having said that, I didn't know there was a media query for different orientations so the accepted answer is a better take on mine.

[atiquratik]

can you please add more detailed code on how OP will get screen size and then write conditional styles for different screen sizes? I guess it'll help to improve the quality of this answer.

[Ren Lowsphere]

Sure! just set an Interval as it will get screen width and height everysecond it's executed | screen.width and screen.height are used to get screen width and height in js you can set it in a variable add the condition and the interval as follows : width = screen.width ; height = screen.height ; setInterval(()=>{if(screen.width < 360){ // execute code when screen width is less than 360 pixels }},1000);

[atiquratik]

sorry for the delayed reply. My objective here was to encourage you to Edit your existing answer and add details to it so that it becomes more meaningful/helpful for the solution seeker.