Skip to content
This repository
Browse code

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...
commit 1a5224047b9a0e1302923adc96f77238489c9da1 1 parent 3cea545
Kin Blas authored
36  js/jquery.mobile.event.js
@@ -3,7 +3,7 @@
3 3
 */
4 4
 
5 5
 //>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
6  
-define( [ "jquery.mobile.core", "jquery.mobile.support", "jquery.mobile.vmouse" ], function() {
  6
+define( [ "jquery.mobile.core", "jquery.mobile.media", "jquery.mobile.support", "jquery.mobile.vmouse" ], function() {
7 7
 //>>excludeEnd("jqmBuildExclude");
8 8
 (function( $, window, undefined ) {
9 9
 
@@ -185,7 +185,37 @@ $.event.special.swipe = {
185 185
 	var win = $( window ),
186 186
 		special_event,
187 187
 		get_orientation,
188  
-		last_orientation;
  188
+		last_orientation,
  189
+		initial_orientation_is_landscape,
  190
+		initial_orientation_is_default,
  191
+		portrait_map = { "0": true, "180": true };
  192
+
  193
+	// It seems that some device/browser vendors use window.orientation values 0 and 180 to
  194
+	// denote the "default" orientation. For iOS devices, and most other smart-phones tested,
  195
+	// the default orientation is always "portrait", but in some Android and RIM based tablets,
  196
+	// the default orientation is "landscape". The following code injects a landscape orientation
  197
+	// media query into the document to figure out what the current orientation is, and then
  198
+	// makes adjustments to the portrait_map if necessary, so that we can properly
  199
+	// decode the window.orientation value whenever get_orientation() is called.
  200
+	if ( $.support.orientation ) {
  201
+
  202
+		// Use a media query to figure out the true orientation of the device at this moment.
  203
+		// Note that we've initialized the portrait map values to 0 and 180, *AND* we purposely
  204
+		// use a landscape media query so that if the device/browser does not support this particular
  205
+		// media query, we default to the assumption that portrait is the default orientation.
  206
+		initial_orientation_is_landscape = $.mobile.media("all and (orientation: landscape)");
  207
+
  208
+		// Now check to see if the current window.orientation is 0 or 180.
  209
+		initial_orientation_is_default = portrait_map[ window.orientation ];
  210
+
  211
+		// If the initial orientation is landscape, but window.orientation reports 0 or 180, *OR*
  212
+		// if the initial orientation is portrait, but window.orientation reports 90 or -90, we
  213
+		// need to flip our portrait_map values because landscape is the default orientation for
  214
+		// this device/browser.
  215
+		if ( ( initial_orientation_is_landscape && initial_orientation_is_default ) || ( !initial_orientation_is_landscape && !initial_orientation_is_default ) ) {
  216
+			portrait_map = { "-90": true, "90": true };
  217
+		}
  218
+	}
189 219
 
190 220
 	$.event.special.orientationchange = special_event = {
191 221
 		setup: function() {
@@ -254,7 +284,7 @@ $.event.special.swipe = {
254 284
 		if ( $.support.orientation ) {
255 285
 			// if the window orientation registers as 0 or 180 degrees report
256 286
 			// portrait, otherwise landscape
257  
-			isPortrait = window.orientation % 180 == 0;
  287
+			isPortrait = portrait_map[ window.orientation ];
258 288
 		} else {
259 289
 			isPortrait = elem && elem.clientWidth / elem.clientHeight < 1.1;
260 290
 		}
44  tests/functional/orientation.html
... ...
@@ -0,0 +1,44 @@
  1
+<!DOCTYPE HTML>
  2
+<html>
  3
+<head>
  4
+	<meta charset="utf-8">
  5
+	<meta name="viewport" content="width=device-width, initial-scale=1">
  6
+	<title>jQuery Mobile: Event Logger</title>
  7
+	<link rel="stylesheet"  href="../../css/themes/default/" />
  8
+	<link rel="stylesheet" href="../../docs/_assets/css/jqm-docs.css" />
  9
+	<style>
  10
+    
  11
+		#orientationText {
  12
+			font-size: x-large;
  13
+			font-weight: bold;
  14
+			margin: 1em;
  15
+		}
  16
+
  17
+	</style>
  18
+	<script src="../../js/jquery.js"></script>
  19
+	<script data-main="../../js/jquery.mobile" src="../../external/requirejs/require.js"></script>
  20
+	<script>
  21
+
  22
+		$( document ).one( "pageinit", function() {
  23
+			function updateOrientation()
  24
+			{
  25
+				$( "#orientationText" ).text( $.event.special.orientationchange.orientation() );
  26
+			}
  27
+	
  28
+			updateOrientation();
  29
+			$( window ).bind( $.support.orientation ? "orientationchange" : "resize", updateOrientation);
  30
+		});
  31
+
  32
+    </script>
  33
+</head>
  34
+
  35
+<body>
  36
+<div data-role="page">
  37
+	<div data-role="header"><h1>Orientation Test</h1></div>
  38
+	<div data-role="content">
  39
+    	<p>The current device orientation is displayed below. It should *ALWAYS* be correct!</p>
  40
+        <div id="orientationText">Orientation Not Supported!</div>
  41
+    </div>
  42
+</div>
  43
+</body>
  44
+</html>

0 notes on commit 1a52240

Please sign in to comment.
Something went wrong with that request. Please try again.