fix the orientation on page to landscape only in Jquery-mobile

Question

How can the orientation of a page be landscape only as i am using jquery mobile for my webapp?

The page contains some tabular data which can't be shown in the portrait mode in the mobile version...

Take a look of my layout.. http://jsfiddle.net/nY5ZF/1/

Can this be fixed???

Answer 1

We now have responsive tables in jquerymobile 1.3.1, you could use that...

http://jquerymobile.com/demos/1.3.0-beta.1/docs/tables/

As its not possible to lock the orientation in webapps unlike hybrid apps (phonegap). Some browsers just do not help us in that.

Next you could display this data in list format OR just check the mode, if portrait then give a simple message "To view table please use landscape".

Answer 2

Try to use the orientation property of jQuery Mobile and set it to false.

jQuery.mobile.orientationChangeEnabled = false;

This should necessarily make a fall back on the resize window event. The resize can be handeled by min-width CSS3

http://jsfiddle.net/nY5ZF/7/

Answer 3

You can't lock the rotation of the browser, but what you can do is use a diferent stylesheet for one orientation and another stylesheet that will hide everything in portrait 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)">