jquery - Mobile site - force landscape only / no auto-rotate

Question

I have a site that has a mobile stylesheet:

<link rel="stylesheet" href="css/mobile.css" media="handheld">

I'm also using jQuery to check for mobile devices and alter functionality accordingly.

But I want to know if there is a way to force landscape-only orientation and disable auto-rotate? Either a CSS or a jQuery solution would be fine.

Thanks!

Answer 1

Use media queries to test the orientation, in the portrait stylesheet hide everything and show a message that the app only works on landscape mode.

<link rel="stylesheet" type="text/css" href="css/style_l.css" media="screen and (orientation: landscape)">
<link rel="stylesheet" type="text/css" href="css/style_p.css" media="screen and (orientation: portrait)">

I think is best aproach