Is It Possible To Use Javascript/CSS To Swap Style Sheets When A Mobile Device Rotates?

Question

I am working on a site that must be designed with mobile accessibility in mind. As part of our brainstorming, we wondered whether it's possible to detect, for a mobile browser (i.e. Mobile Safari or the Android browser), when the viewing device has changed orientation, and to use that as a trigger to change page content? As the title of this question implies, our best-case scenario is the ability to detect the orientation change and use it to alter the CSS on the fly so as to present a slightly different page for landscape versus portrait.

Of course we can just design for a page that looks good one way and make it obvious that it's supposed to be viewed that way, but the cool-stuff factor of a page that looks good either way is pretty appealing.

Is this idea implementable? Practical?

Answer 1

Yes, this is answered in a more general question.

To summarize, you would listen with Javascript to the orientationchange event, and switch the styling in the event handler, depending on the value of window.orientation.

Answer 2

You can also use media queries to do this without any JS at all - see http://davidbcalhoun.com/2010/dealing-with-device-orientation