Hopiu/jquery-mobile
1
0
Fork 0
mirror of https://github.com/Hopiu/jquery-mobile.git synced 2026-04-29 10:24:45 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fix for issue #2933 - get_orientation() and hence getScreenHeight() doesn't work on some devices.

Browse source
This commit is contained in:
jblas@adobe.com 2012-01-06 10:19:04 -08:00 committed by Mat Marquis
parent cfb6343fc9
commit 8303055687
2 changed files with 82 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
js/jquery.mobile.event.js
View file

@ -2,6 +2,12 @@
* "events" plugin - Handles events
*/
<<<<<<< HEAD
=======
//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
define( [ "jquery.mobile.core", "jquery.mobile.media", "jquery.mobile.support", "jquery.mobile.vmouse" ], function() {
//>>excludeEnd("jqmBuildExclude");
>>>>>>> 1a52240... Fix for issue #2933 - get_orientation() and hence getScreenHeight() doesn't work on some devices
(function( $, window, undefined ) {
// add new event shortcuts
@ -182,7 +188,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() {
@ -251,7 +287,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;
}

44
tests/functional/orientation.html Normal file
View file

@ -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>