Permalink
Browse files

Fix for issue #2933 - get_orientation() and hence getScreenHeight() d…

…oesn't work on some devices

It seems that some device/browser vendors use window.orientation values 0 and 180 to denote the "default" orientation. For iOS devices, and most other smart-phones tested, the default orientation is always "portrait", but in some Android and RIM based tablets, the default orientation is "landscape".

- Modified the orientationchange plugin so that it injects a landscape orientation media query into the document to figure out what the initial orientation is, it then makes adjustments to a portrait_map if necessary, so that we can properly decode the window.orientation value whenever get_orientation() is called.
  • Loading branch information...
jblas committed Jan 6, 2012
1 parent 3cea545 commit 1a5224047b9a0e1302923adc96f77238489c9da1
Showing with 77 additions and 3 deletions.
  1. +33 −3 js/jquery.mobile.event.js
  2. +44 −0 tests/functional/orientation.html
View
@@ -3,7 +3,7 @@
*/
//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
define( [ "jquery.mobile.core", "jquery.mobile.support", "jquery.mobile.vmouse" ], function() {
define( [ "jquery.mobile.core", "jquery.mobile.media", "jquery.mobile.support", "jquery.mobile.vmouse" ], function() {
//>>excludeEnd("jqmBuildExclude");
(function( $, window, undefined ) {
@@ -185,7 +185,37 @@ $.event.special.swipe = {
var win = $( window ),
special_event,
get_orientation,
last_orientation;
last_orientation,
initial_orientation_is_landscape,
initial_orientation_is_default,
portrait_map = { "0": true, "180": true };
// It seems that some device/browser vendors use window.orientation values 0 and 180 to
// denote the "default" orientation. For iOS devices, and most other smart-phones tested,
// the default orientation is always "portrait", but in some Android and RIM based tablets,
// the default orientation is "landscape". The following code injects a landscape orientation
// media query into the document to figure out what the current orientation is, and then
// makes adjustments to the portrait_map if necessary, so that we can properly
// decode the window.orientation value whenever get_orientation() is called.
if ( $.support.orientation ) {
// Use a media query to figure out the true orientation of the device at this moment.
// Note that we've initialized the portrait map values to 0 and 180, *AND* we purposely
// use a landscape media query so that if the device/browser does not support this particular
// media query, we default to the assumption that portrait is the default orientation.
initial_orientation_is_landscape = $.mobile.media("all and (orientation: landscape)");
// Now check to see if the current window.orientation is 0 or 180.
initial_orientation_is_default = portrait_map[ window.orientation ];
// If the initial orientation is landscape, but window.orientation reports 0 or 180, *OR*
// if the initial orientation is portrait, but window.orientation reports 90 or -90, we
// need to flip our portrait_map values because landscape is the default orientation for
// this device/browser.
if ( ( initial_orientation_is_landscape && initial_orientation_is_default ) || ( !initial_orientation_is_landscape && !initial_orientation_is_default ) ) {
portrait_map = { "-90": true, "90": true };
}
}
$.event.special.orientationchange = special_event = {
setup: function() {
@@ -254,7 +284,7 @@ $.event.special.swipe = {
if ( $.support.orientation ) {
// if the window orientation registers as 0 or 180 degrees report
// portrait, otherwise landscape
isPortrait = window.orientation % 180 == 0;
isPortrait = portrait_map[ window.orientation ];
} else {
isPortrait = elem && elem.clientWidth / elem.clientHeight < 1.1;
}
@@ -0,0 +1,44 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile: Event Logger</title>
<link rel="stylesheet" href="../../css/themes/default/" />
<link rel="stylesheet" href="../../docs/_assets/css/jqm-docs.css" />
<style>
#orientationText {
font-size: x-large;
font-weight: bold;
margin: 1em;
}
</style>
<script src="../../js/jquery.js"></script>
<script data-main="../../js/jquery.mobile" src="../../external/requirejs/require.js"></script>
<script>
$( document ).one( "pageinit", function() {
function updateOrientation()
{
$( "#orientationText" ).text( $.event.special.orientationchange.orientation() );
}
updateOrientation();
$( window ).bind( $.support.orientation ? "orientationchange" : "resize", updateOrientation);
});
</script>
</head>
<body>
<div data-role="page">
<div data-role="header"><h1>Orientation Test</h1></div>
<div data-role="content">
<p>The current device orientation is displayed below. It should *ALWAYS* be correct!</p>
<div id="orientationText">Orientation Not Supported!</div>
</div>
</div>
</body>
</html>

0 comments on commit 1a52240

Please sign in to comment.