Adapting HTML to mobile browsers horiz/vert orientation

[sneakyimp]

Most of the new smartphones have a feature wherein the layout of the screen changes depending on the horizontal/vertical orientation of the phone. Is it possible to have two entirely distinct HTML layouts depending on the phone orientation. E.g., background is white for portrait orientation and black for landscape orientation?

Are there Javascript events that tell us when the orientation changes?

[jeepin81]

have you tried google searching 'javascript accelerometer' - that should point you in the right direction.

doing a quick search I came across this page:

http://www.albertosarullo.com/blog/javascript-accelerometer-demo-source

[jeepin81]

actually this might be closer to what you're looking for:

https://developer.mozilla.org/en/detecting_device_orientation

[sneakyimp]

Your suggestion is spot-on. I have done some searching and would like to point out a couple of things:
not everyone uses Safari and/or iPhone -- in fact Android has more market share.
Android apparently doesn't support accelerometer events via Javascript -- or didn't

And thanks for the mozilla docs, but I would wager only a very small percentage of mobile phone users actually bother to install firefox on their phone.

Sounds to me like depending on Javascript detection of orientation is probably not the best idea. Thoughts?

EDIT: After a little more searching, it would seem that Safari usage exceeds Android browsers significantly, despite Android phones having more market share. I expect this is due to the head start the iPhone had on Android.

[jeepin81]

what about jQuery's Mobile Framework?

http://jquerymobile.com/demos/1.0.1/docs/api/events.html

[sneakyimp]

Now you're talking. Thanks for that.