A new utility: $.mobile.zoom, which as 3 members: enabled [bool], disable [function], and enable [function].

This simple utility is used to disable user scaling in devices like iOS. The disable() method disables user-scaling. The enable() method enables user-scaling. The enabled property keeps track of state.

Two other utilites are included here as well.

First, there's zoom.iosfocusfix.js, which disables zoom as a select or input element is focused, preventing iOS from zooming into that element and cropping the viewport. Zoom is restored just after the focus event fires (a half second timeout).

Then there's zoom.iosorientationfix.js, which is intended to fix the iOS orientationchange zoom bug, following the approach from this project https://github.com/scottjehl/iOS-Orientationchange-Fix. This may not  be working yet. Needs testing, and it may require that we change the values of the meta content to use maximum-scale instead of user-scalable.

Lastly, fixedtoolbar, once it lands, should use this utility to disable/enable zoom, rather than the one that's currently included in its own source.
This commit is contained in:
scottjehl 2012-01-17 13:52:59 +07:00
parent 7f2e50430e
commit 66be09d2de
4 changed files with 87 additions and 0 deletions

View file

@ -40,6 +40,10 @@ define([
'jquery.mobile.controlGroup',
'jquery.mobile.links',
'jquery.mobile.fixedToolbar'
'jquery.mobile.fixedToolbar',
'jquery.mobile.zoom',
'jquery.mobile.zoom.iosfocusfix',
'jquery.mobile.zoom.iosorientationfix'
], function() {
require( [ 'jquery.mobile.init' ] );
});

View file

@ -0,0 +1,20 @@
//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
//>>description: Prevents iOS from zooming into form fields on focus
//>>label: Prevent form focus zoom
define( [ "jquery", "jquery.mobile.core", "jquery.mobile.zoom" ], function( $ ) {
//>>excludeEnd("jqmBuildExclude");
( function( $, window ) {
$( document )
.bind( "focusin.iosfocusfix vmousedown.iosfocusfix", function( e ){
if( $( e.target ).is( "select, input" ) ){
$.mobile.zoom.disable();
setTimeout( $.mobile.zoom.enable, 500 );
}
} );
}( jQuery, this ));
//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
});
//>>excludeEnd("jqmBuildExclude");

View file

@ -0,0 +1,35 @@
//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
//>>description: Fixes the iOS orientation change bug using a jQM version of this technique https://github.com/scottjehl/iOS-Orientationchange-Fix
//>>label: iOS orientation change bugfix
define( [ "jquery", "jquery.mobile.core", "jquery.mobile.zoom" ], function( $ ) {
//>>excludeEnd("jqmBuildExclude");
( function( $, window ) {
var orientation = window.orientation,
rotation = 0;
function checkTilt( e ){
e = e.originalEvent;
orientation = Math.abs( window.orientation );
rotation = Math.abs( e.gamma );
if( rotation > 8 && orientation === 0 ){
if( $.mobile.zoom.enabled ){
$.mobile.zoom.disable();
}
}
else {
if( !$.mobile.zoom.enabled ){
$.mobile.zoom.enable();
}
}
}
$( window )
.bind( "orientationchange", $.mobile.zoom.enable )
.bind( "deviceorientation", checkTilt );
}( jQuery, this ));
//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
});
//>>excludeEnd("jqmBuildExclude");

28
js/jquery.mobile.zoom.js Normal file
View file

@ -0,0 +1,28 @@
//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
//>>description: Utility methods for enabling and disabling user scaling (pinch zoom)
//>>label: zoomhandling
define( [ "jquery", "jquery.mobile.core" ], function( $ ) {
//>>excludeEnd("jqmBuildExclude");
( function( $ ) {
var meta = $( "meta[name=viewport]" ),
initialContent = meta.attr( "content" ),
disabledZoom = initialContent + ",user-scalable=no",
enabledZoom = initialContent + ",user-scalable=yes";
$.mobile.zoom = $.extend( {}, {
enabled: true,
disable: function() {
meta.attr( "content", disabledZoom );
$.mobile.zoom.enabled = false;
},
enable: function() {
meta.attr( "content", enabledZoom );
$.mobile.zoom.enabled = true;
}
});
}( jQuery ));
//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
});
//>>excludeEnd("jqmBuildExclude");