Can I determine if a device is in portrait or landscape mode using jquery?

Question

I want to conditionally alter what the user sees on the photo gallery web site I'm going to create based on if the device being used to view the site is in portrait/vertical vs. landscape/horizontal mode/orientation. Is this possible?

Answer 1

Try the orientationchange event handler, something like this:

$(window).bind("orientationchange", function(evt){
    alert(evt.orientation);
});

Here's the jQuery Mobile entry on detecting and firing the orientationchange event.

Answer 2

If you are just changing the layout, consider CSS Media Queries instead.

In Chrome 7 and Firefox 3.6, there is the deviceorientation event which you can listen to.

---

In response to your comment, a simple way of detecting tablets and phones is to detect the screen resolution and size. Tablets generally have higher display resolutions than phones. Media Queries can determine these factors.

As for tablet-phone options

• If your device is a phone, you can toggle CSS using Media Queries based on device orientation.

• If the device is a tablet, you can toggle the CSS using JS using the body id/class switching or by swapping out stylesheets.