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
Page-Break-* Doesn't Work on Google Chrome
CSS Positioning Elements Next to Each Other
Which Is Better to Use in CSS, Percentage or Pixels
Fontawesome - Failed to Decode Downloaded Font
Internet Explorer 8 Bug with Display: Table
Is There a Way in Bootstrap to "Split" a Column on Small Screens
Infinite Image Slider with Pure CSS3
Ie11 Making Background Image Text Blurry
CSS Tables for Rowspan and Colspan
What Does a CSS Selector in Square Brackets Select in HTML
Svg with Radialgradient Not Work in Browsers
CSS Set Width to Fill % of Remaining Area
How to Apply Box-Shadow on All Four Sides
How to Remove Left Property When Position: Absolute
User Agent Stylesheet Overriding My Table Style? Twitter Bootstrap
Why Doesn't This CSS Transition Work on Svg Inside an Anchor