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.
jquery-archive · Jan 6, 2012 · 1a52240 · 1a52240
1 parent 3cea545
commit 1a52240
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 3 deletions.
diff --git a/js/jquery.mobile.event.js b/js/jquery.mobile.event.js
@@ -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;
 		}

diff --git a/tests/functional/orientation.html b/tests/functional/orientation.html
@@ -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>