Permalink
Browse files

when touch overflow scrolling is supported and enabled, user scaling …

…can create serious usability issues where it's difficult to get zoomed back out. This disables user scaling when that overflow scrolling is enabled (currently only projected for ios5 support)
  • Loading branch information...
scottjehl
scottjehl committed Sep 27, 2011
1 parent 1ad3eea commit 47480d69f9f91c91d5b37df332c8605144ad626f
Showing with 22 additions and 0 deletions.
  1. +4 −0 js/jquery.mobile.fixHeaderFooter.native.js
  2. +18 −0 js/jquery.mobile.init.js
@@ -7,8 +7,12 @@
(function( $, undefined ) {
// Enable touch overflow scrolling when it's natively supported
$.mobile.touchOverflowEnabled = true;
// Enabled zoom when touch overflow is enabled. Can cause usability issues, unfortunately
$.mobile.touchOverflowZoomEnabled = false;
$( document ).bind( "pagecreate", function( event ) {
if( $.support.touchOverflow && $.mobile.touchOverflowEnabled ){
View
@@ -103,6 +103,24 @@
}
}
});
// This function injects a meta viewport tag to prevent scaling. Off by default, on by default when touchOverflow scrolling is enabled
function disableZoom() {
var cont = "user-scalable=no",
meta = $( "meta[name='viewport']" );
if( meta.length ){
meta.attr( "content", meta.attr( "content" ) + ", " + cont );

This comment has been minimized.

Show comment
Hide comment
@staabm

staabm Sep 27, 2011

Contributor

What happens when the user given meta tag defines user-scalabake=yes?

@staabm

staabm Sep 27, 2011

Contributor

What happens when the user given meta tag defines user-scalabake=yes?

This comment has been minimized.

Show comment
Hide comment
@scottjehl

scottjehl Sep 27, 2011

Contributor

Good question. Maybe we should test if this overrides it or not. It's painful we had to add this at all, definitely don't want to disable zoom...

@scottjehl

scottjehl Sep 27, 2011

Contributor

Good question. Maybe we should test if this overrides it or not. It's painful we had to add this at all, definitely don't want to disable zoom...

}
else{
$( "head" ).prepend( "<meta>", { "name": "viewport", "content": cont } );
}
}
// if touch-overflow is enabled, disable user scaling, as it creates usability issues
if( $.support.touchOverflow && $.mobile.touchOverflowEnabled && !$.mobile.touchOverflowZoomEnabled ){
disableZoom();
}
// initialize events now, after mobileinit has occurred
$.mobile._registerInternalEvents();

0 comments on commit 47480d6

Please sign in to comment.