Mobile site - force landscape only / no auto-rotate

jquery css mobile landscape autorotate
Joey picture Joey · Jun 11, 2012 · Viewed 78.9k times · Source

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

daver picture daver · Oct 3, 2012

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

Related questions

:touch CSS pseudo-class or something similar?

I am trying to make a button, such that when the user clicks on it, it changes its style while the mouse button is being held down. I also want it to change its style in a similar way if …

Read More
iphone/ipad triggering unexpected resize events

I'm working on a mobile version of my site. I'm using media queries and CSS as much as possible, but I'm also using some javascript to, for example, turn my navigation into a collapse/expand list on smaller devices to …

Read More
How to create a jQuery Mobile theme

How do I create a jQueryMobile theme? Is it overriding the CSS the best way?

Read More