How to Force a Website to Be in Landscape Mode When Viewed on a Mobile Device

How do you force a website to be in landscape mode when viewed on a mobile device?

Short answer, you can't and you shouldn't control a user's OS behaviour via a website.

You can display a warning using the answer on the following question:
forcing web-site to show in landscape mode only

Or you can force your layout to look like landscape even in portrait mode using the following code (taken from http://www.quora.com/Can-I-use-Javascript-to-force-a-mobile-browser-to-stay-in-portrait-or-landscape-mode):

@media screen and (orientation:landscape) {

#container {
-ms-transform: rotate(-90deg); /* IE 9 */
-webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
transform: rotate(-90deg);
width: /* screen width */ ;
height: /* screen height */ ;
overflow: scroll;
}
}

As the second site recommends though, you should try and make your site look good however the user wishes to view it.

Foundation: Force landscape mode on mobile devices

With the orientation selector that general03 recommended, I added the transform property:

@media only screen and (max-width: 630px) and (orientation: portrait) {
.video-container{
transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
}
}

Is there a way to force horizontal / landscape layout on mobile devices?

There is a hack that will accomplish this, but I seriously advise against using it - your design should adapt to whether someone is in portrait or landscape mode.

Step 1: Query the window.orientation property to see if you're in landscape or portrait mode

Step 2: If you're in portrait mode use a -webkit-transform rotate (-90) on a div that's wrapping your entire page to force it into a landscape layout.

This won't work quite correctly - the browser UI will still be in portrait mode, but presumably the user will figure out that they're supposed to rotate the phone back into landscape mode in order to view the content. This is incredibly annoying to users - there is probably a good reason they are trying to read your site in portrait mode.



Related Topics



Leave a reply



Submit