Skip to content
This repository
Browse code

Fix for issue #3707 - iOS4 reports landscape when it's in portrait

- This was a regression caused by the fix for issue #2933:

#2933
1a52240

This triggered a bug on iPhone/iPod Touch devices running iOS 4.2 - 5.1 where the browser *ALWAYS* applies a landscape media query. This bug does not exist on iPad.

- Removed the use of the landscape media query, and switched to using window.innerWidth/innerHeight w ith a threshold to determine if the device is currently in landscape mode. A threshold is necessary because on small form factors like the iPhone, the user can enable the developer console which takes up more vertical space, making the useable width of the browser window larger than the height.
  • Loading branch information...
commit 0837c4a738b4f306ff6437f021100b350a753e11 1 parent 5cc543c
Kin Blas authored April 05, 2012

Showing 1 changed file with 30 additions and 10 deletions. Show diff stats Hide diff stats

  1. 40  js/jquery.mobile.event.js
40  js/jquery.mobile.event.js
@@ -4,7 +4,7 @@
4 4
 //>>group: core
5 5
 //>>required: true
6 6
 
7  
-define( [ "jquery", "./jquery.mobile.core", "./jquery.mobile.media", "./jquery.mobile.support", "./jquery.mobile.vmouse" ], function( $ ) {
  7
+define( [ "jquery", "./jquery.mobile.core", "./jquery.mobile.support", "./jquery.mobile.vmouse" ], function( $ ) {
8 8
 //>>excludeEnd("jqmBuildExclude");
9 9
 (function( $, window, undefined ) {
10 10
 
@@ -194,17 +194,37 @@ $.event.special.swipe = {
194 194
 	// It seems that some device/browser vendors use window.orientation values 0 and 180 to
195 195
 	// denote the "default" orientation. For iOS devices, and most other smart-phones tested,
196 196
 	// the default orientation is always "portrait", but in some Android and RIM based tablets,
197  
-	// the default orientation is "landscape". The following code injects a landscape orientation
198  
-	// media query into the document to figure out what the current orientation is, and then
199  
-	// makes adjustments to the portrait_map if necessary, so that we can properly
200  
-	// decode the window.orientation value whenever get_orientation() is called.
  197
+	// the default orientation is "landscape". The following code attempts to use the window
  198
+	// dimensions to figure out what the current orientation is, and then makes adjustments
  199
+	// to the to the portrait_map if necessary, so that we can properly decode the
  200
+	// window.orientation value whenever get_orientation() is called.
  201
+	//
  202
+	// Note that we used to use a media query to figure out what the orientation the browser
  203
+	// thinks it is in:
  204
+	//
  205
+	//     initial_orientation_is_landscape = $.mobile.media("all and (orientation: landscape)");
  206
+	//
  207
+	// but there was an iPhone/iPod Touch bug beginning with iOS 4.2, up through iOS 5.1,
  208
+	// where the browser *ALWAYS* applied the landscape media query. This bug does not
  209
+	// happen on iPad.
  210
+
201 211
 	if ( $.support.orientation ) {
202 212
 
203  
-		// Use a media query to figure out the true orientation of the device at this moment.
204  
-		// Note that we've initialized the portrait map values to 0 and 180, *AND* we purposely
205  
-		// use a landscape media query so that if the device/browser does not support this particular
206  
-		// media query, we default to the assumption that portrait is the default orientation.
207  
-		initial_orientation_is_landscape = $.mobile.media("all and (orientation: landscape)");
  213
+		// Check the window width and height to figure out what the current orientation
  214
+		// of the device is at this moment. Note that we've initialized the portrait map
  215
+		// values to 0 and 180, *AND* we purposely check for landscape so that if we guess
  216
+		// wrong, , we default to the assumption that portrait is the default orientation.
  217
+		// We use a threshold check below because on some platforms like iOS, the iPhone
  218
+		// form-factor can report a larger width than height if the user turns on the
  219
+		// developer console. The actual threshold value is somewhat arbitrary, we just
  220
+		// need to make sure it is large enough to exclude the developer console case.
  221
+
  222
+		var ww = window.innerWidth || $( window ).width(),
  223
+			wh = window.innerHeight || $( window ).height(),
  224
+			landscape_threshold = 50;
  225
+
  226
+		initial_orientation_is_landscape = ww > wh && ( ww - wh ) > landscape_threshold;
  227
+
208 228
 
209 229
 		// Now check to see if the current window.orientation is 0 or 180.
210 230
 		initial_orientation_is_default = portrait_map[ window.orientation ];

0 notes on commit 0837c4a

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