Nov 19, 2010

Javascript Mobile Orientation Detection

Posted by Devin R. Olsen on in JavaScript Tutorials | 8 comments

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/