Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

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
@jblas jblas authored
Showing with 30 additions and 10 deletions.
  1. +30 −10 js/jquery.mobile.event.js
View
40 js/jquery.mobile.event.js
@@ -4,7 +4,7 @@
//>>group: core
//>>required: true
-define( [ "jquery", "./jquery.mobile.core", "./jquery.mobile.media", "./jquery.mobile.support", "./jquery.mobile.vmouse" ], function( $ ) {
+define( [ "jquery", "./jquery.mobile.core", "./jquery.mobile.support", "./jquery.mobile.vmouse" ], function( $ ) {
//>>excludeEnd("jqmBuildExclude");
(function( $, window, undefined ) {
@@ -194,17 +194,37 @@ $.event.special.swipe = {
// 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.
+ // the default orientation is "landscape". The following code attempts to use the window
+ // dimensions to figure out what the current orientation is, and then makes adjustments
+ // to the to the portrait_map if necessary, so that we can properly decode the
+ // window.orientation value whenever get_orientation() is called.
+ //
+ // Note that we used to use a media query to figure out what the orientation the browser
+ // thinks it is in:
+ //
+ // initial_orientation_is_landscape = $.mobile.media("all and (orientation: landscape)");
+ //
+ // but there was an iPhone/iPod Touch bug beginning with iOS 4.2, up through iOS 5.1,
+ // where the browser *ALWAYS* applied the landscape media query. This bug does not
+ // happen on iPad.
+
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)");
+ // Check the window width and height to figure out what the current orientation
+ // of the device is at this moment. Note that we've initialized the portrait map
+ // values to 0 and 180, *AND* we purposely check for landscape so that if we guess
+ // wrong, , we default to the assumption that portrait is the default orientation.
+ // We use a threshold check below because on some platforms like iOS, the iPhone
+ // form-factor can report a larger width than height if the user turns on the
+ // developer console. The actual threshold value is somewhat arbitrary, we just
+ // need to make sure it is large enough to exclude the developer console case.
+
+ var ww = window.innerWidth || $( window ).width(),
+ wh = window.innerHeight || $( window ).height(),
+ landscape_threshold = 50;
+
+ initial_orientation_is_landscape = ww > wh && ( ww - wh ) > landscape_threshold;
+
// Now check to see if the current window.orientation is 0 or 180.
initial_orientation_is_default = portrait_map[ window.orientation ];
Please sign in to comment.
Something went wrong with that request. Please try again.