Methods to Detect Orientation Change on Mobile Devices

Unless your mobile application allows for only portrait or only landscape views, there’s a good chance you will need to adjust a few things. Even if you’ve built your layouts in a fluid fashion, you may need to programmatically make some changes. There are a few strategies for knowing when pages have changed, so let’s check out how we can detect orientation changes on mobile devices.

1. Orientationchange Event

This method is what you would expect from a mobile API; a simple orientationchange event on the window:

During these changes, the window.orientation property may change. A value of 0 means portrait view, -90 means a the device is landscape rotated to the right, and 90 means the device is landscape rotated to the left.

2. Resize Event

Some devices haven’t provided the orientationchange event, but do fire the window’s resize event:

3. Screen Sizing

There are a few properties you can retrieve from the window object to get screen size and what I consider “virtual” screen size:

  • outerWidth, outerHeight: the real pixel realestate (ex: 320×356 on iPhone, portrait)
  • innerWidth, innerHeight: the virtual pixel realestate (ex: 980×1091 on iPhone, portrait)

These don’t give you the orientation, of course, but using some simple math, you can find out if the window is currently wider or taller.

4. Media Queries

We can identify orientation by CSS media queries as well:

If you’d like to get clever, you can code a periodical “watcher” with JavaScript to check the background color of a block and fire your own orientation change.

5. matchMedia Event

The native window.matchMedia method allows for live media-querying. We can use the media queries above to find out if we’re in portrait or landscape view:

Resource

Leave a Reply

Your email address will not be published. Required fields are marked *

CAPTCHA