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???

Solution 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".

Solution 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/

Comments

[SaurabhLP]

your idea is right but some what the tabular design dnt fit in mobile devices... That's why trying to find the solution for it...

[SaurabhLP]

yes i think this is the perfect soln. for it, i have answered this ques. before jQm launches this feature... thanks for that...