Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Detect change in orientation using javascript

Is it possible to detect change in orientation of the browser on the iPad or Galaxy Tab using javascript? I think it's possible using css media queries.

like image 282
manraj82 Avatar asked Mar 31 '11 11:03

manraj82


People also ask

How do you know if orientation changes?

use android:configChanges="orientation|screenSize" instead of android:configChanges="orientation|keyboardHidden" in your manifest file and check ... !!!

How can we detect the orientation of the screen?

You can detect this change in orientation on Android as well as iOS with the following code: var supportsOrientationChange = "onorientationchange" in window, orientationEvent = supportsOrientationChange ?

How do you change orientation when retaining data?

Another most common solution to dealing with orientation changes by setting the android:configChanges flag on your Activity in AndroidManifest. xml. Using this attribute your Activities won't be recreated and all your views and data will still be there after orientation change.


1 Answers

UPDATE:

You might want to check out

jQuery mobile orientationchange

or the plain JS one:

window.addEventListener("orientationchange", function() {   alert(window.orientation); }, false); 

MDN:

window.addEventListener("orientationchange", function() {     alert("the orientation of the device is now " + screen.orientation.angle); }); 

Older answer

http://www.nczonline.net/blog/2010/04/06/ipad-web-development-tips/

Safari on the iPad does support the window.orientation property, so if necessary, you can use that to determine if the user is in horizontal or vertical mode. As reminder of this functionality:

window.orientation is 0 when being held vertically window.orientation is 90 when rotated 90 degrees to the left (horizontal) window.orientation is -90 when rotated 90 degrees to the right (horizontal) 

There is also the orientationchange event that fires on the window object when the device is rotated.

You can also use CSS media queries to determine if the iPad is being held in vertical or horizontal orientation, such as:

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css"> 

http://www.htmlgoodies.com/beyond/webmaster/toolbox/article.php/3889591/Detect-and-Set-the-iPhone--iPads-Viewport-Orientation-Using-JavaScript-CSS-and-Meta-Tags.htm

<script type="text/javascript"> var updateLayout = function() {   if (window.innerWidth != currentWidth) {     currentWidth = window.innerWidth;     var orient = (currentWidth == 320) ? "profile" : "landscape";     document.body.setAttribute("orient", orient);     window.scrollTo(0, 1);   } };  iPhone.DomLoad(updateLayout); setInterval(updateLayout, 400); </script> 
like image 134
mplungjan Avatar answered Sep 18 '22 15:09

mplungjan