Javascript Mobile Orientation Detection

Today I wanted to share with you how to detect the orientation of a mobile device such as iPhone, iPad, Blackberry even the Android with JavaScript alone. Before we start we should talk about “Media Queries” for CSS3.

CSS3 media queries allow you to change the layouts/look and feel of your site by means of screen side detection. The problem however with CSS3 media queries you can’t manipulate the DOM markup of a document based on these screen sizes that are detected.

With the help of JavaScript however, we can now manipulate DOM markup by determining the orientation of a mobile device. With the window.onorientationchange feature of most grade A mobile devices we can both listen for orientation change or detect orientation upon page loadings.

Here is our script:

detectOrientation();
window.onorientationchange = detectOrientation;
function detectOrientation(){
	if(typeof window.onorientationchange != 'undefined'){
		if ( orientation == 0 ) {
	 		//Do Something In Portrait Mode
		}
		else if ( orientation == 90 ) {
	 		//Do Something In Landscape Mode
		}
		else if ( orientation == -90 ) {
These two herbal supplements improve the  viagra buy best male virility and potency. Musli Safed offers effective cheapest sildenafil  cure for reproductive system disorders. One of the most common  purchase viagra no prescription sexual health issues is impotence, also known as erectile dysfunction (ED). You can buy Silagra or Kamagra over the counter generic viagra 100mg  therapy. 	 		//Do Something In Landscape Mode
		}
		else if ( orientation == 180 ) {
	 		//Do Something In Landscape Mode
		}
	}
}

With the above JavaScript, upon the page loading we determine right away what the orientation of our device is by calling the function “detectOrientation();”. From here we have a condition that checks the “typeof” our “window.onorientationchange” to see if truly the feature exists for the device or not. If indeed the ability of “window.onorientationchange” is there for a device we travel further down into more conditions based on the devices orientation direction (0,90,-90,180).

In each orientation detection we cause begin to manipulate our document however we wish! Very nifty!

Down side is there is only one portrait detection, leaving some devices such as iPad unable to detect it being in portrait mode with the device held upside down.

So to conclude, with the power of most new mobile devices utilizing CSS3 media queries and now “window.onorientationchange” we have the power to manipulate almost all of our document however we like to best fit our visitors devices.

Thanks to the original creator of the above script:
http://favo.asia/2010/07/detecting-ipad-orientation-using-javascript/

Devin R. Olsen

Devin R. Olsen

Located in Portland Oregon. I like to teach, share and dabble deep into the digital dark arts of web and game development.

More Posts

Follow Me:TwitterFacebookGoogle Plus

8 Responses to “Javascript Mobile Orientation Detection”

  1. Devin R. Olsen Jack says:

    All very well but what is with windows tablets.
    Once again Microsoft throws sand in the springworks.

    How does one detect orientation in a windows tablet with JavaScript?

  2. Devin R. Olsen Bijay says:

    thank! it solved my problem!

  3. Devin R. Olsen umair says:

    Did any one tried it on Android 2.2.2 (Dell Streak)

    This method is keep invoking continuously even I have commented the explicit call to it.

    On the other hand its running perfectly on android 3.2.1 tablet.

    Please specify any fix if you people have…

    Regards
    Umair Ali

  4. Devin R. Olsen AL says:

    Thanks!

    else if ( orientation == 180 ) {
    //Do Something In Landscape Mode
    }

    …maybe is Portrait Mode ;)

  5. I conceive other website proprietors should take this web site as an example , very clean and superb user pleasant design and style . “Democracy is good. I say this because other systems are worse.” by Jawaharlal Nehru.

  6. Could you please tell me, how can we have some kind of binding on orientation of Ipad?

    Like whenever the orientation changes in IPad, I want to call the above funtion. Not on the page load. Is there any way to do it?

    Thanks for your reply in advance.

    Regards
    Ashish

  7. […] we start we should talk about “Media Queries” for CSS3. CSS3 media queries allow… [full post] Devin R. Olsen Devin R. Olsen Web Developer javascript tutorials 0 0 […]

  8. Devin R. Olsen MTN says:

    Men, it´s great ! Many Thanks from Argentina !

  9. I always enjoy feedback from my readers.

Leave a Reply