Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
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...
commit 1a5224047b9a0e1302923adc96f77238489c9da1 1 parent 3cea545
@jblas jblas authored
Showing with 77 additions and 3 deletions.
  1. +33 −3 js/jquery.mobile.event.js
  2. +44 −0 tests/functional/orientation.html
View
36 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;
}
View
44 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>
Please sign in to comment.
Something went wrong with that request. Please try again.