Orientation Changes Across Devices
lholmquist May 16, 2012 9:01 AMRecently i converted a flash application to a web app so it could also run on tablets. My main focus was the iPad, but it also needed to work on other tablets. The other tablet i was testing on was a galaxy tab.
When the app is turned to landscape/portrait i need to run some javascript.
The probelm i ran into was in my orientation change event listener. The Tab's default orientation is landscape(window.orientation == 0) and the iPad's is portrait(window.orientation == 0). Fortunatly the css media queries still work correctly
the solution i came up with was to create a div, that is position:absolute, right after the body tag. when the landscape, i switch to display:none and in portrait it switches to display:block
I'm currently checking the div's display property during the orientation change event to determine if its landscape/portrait, but i needed to use a setTimeout(function(){},1000) to wait for things to load on the Tab.
here is some example code:
@media screen and (orientation:landscape){ #orientationMarker { display:block; } } @media screen and (orientation: portrait) { #orientationMarker { display:none; } } if(!DetectIpad()) { setTimeout(function() { if($j("#orientationMarker").css('display') == 'none') { //this should be portrait windowOrientation = 0; } else { //this should be landscape windowOrientation = 90; } onMyOrientationChange(windowOrientation); },1000); } else { onMyOrientationChange(windowOrientation); }
i'm thinking of removing this and just checking once after the document is ready and have a global variable that will work as an offset.
Has anyone come up with a better way of doing this? I feel like i'm hacking for IE again.
-Luke