I'm trying to force the landscape mode for my application because my application is absolutely not designed for the portrait mode.
How can I do that?
It is now possible with the HTML5 webapp manifest. See below.
Original answer:
You can't lock a website or a web application in a specific orientation. It goes against the natural behaviour of the device.
You can detect the device orientation with CSS3 media queries like this:
@media screen and (orientation:portrait) {
// CSS applied when the device is in portrait mode
}
@media screen and (orientation:landscape) {
// CSS applied when the device is in landscape mode
}
Or by binding a JavaScript orientation change event like this:
document.addEventListener(orientationchange, function(event){
switch(window.orientation)
{
case -90: case 90:
/* Device is in landscape mode */
break;
default:
/* Device is in portrait mode */
}
});
Update on November 12, 2014: It is now possible with the HTML5 webapp manifest.
As explained on html5rocks.com, you can now force the orientation mode using a manifest.json file.
You need to include those line into the json file:
{
display: standalone, /* Could be fullscreen, standalone, minimal-ui, or browser */
orientation: landscape, /* Could be landscape or portrait */
...
}
And you need to include the manifest into your html file like this:
<link rel=manifest href=manifest.json>
Not exactly sure what the support is on the webapp manifest for locking orientation mode, but Chrome is definitely there. Will update when I have the info.
