Testing/mocking an orientation change in Chrome?

Question

We're writing a mobile app using jQuery mobile and do most of the javascript debugging in Chrome. One thing I can't test however is an orientation change, from portrait to landscape and vice versa. I have to use a phone to fire that event, and am unable to debug the javascript window.orientationchange event without Chrome.

Or so it would seem. Is there a way to mock this event in Chrome somehow?

Answer 1

Since a desktop device doesn't have any real orientation changes, like mobile devices does have, it's no use to listen to orientationchange. You could simulate orientation by resizing the browser window though.

David Walsh wrote an article about this: http://davidwalsh.name/orientation-change

Answer 2

A way to test your media queries based on orientation:

The Window Resizer extension for Google Chrome enables you to view and test your site in either portrait or landscape orientation. When installed, it has a size predefined of 320 x 480 and the orientation returned by jQuery using $.event.special.orientationchange.orientation() will be "portrait". I added a new size of 480 x 320 for landscape and indicated a "Screen Type" of mobile. In 480 x 320 size, the orientation returned by jQuery using $.event.special.orientationchange.orientation() will be "landscape".

This does not allow you to test the orientation change event specifically, but it is very useful for testing media queries based on orientation.