CODEWITHSUNDEEP
javascriptjqueryiosjquery-mobile
tronc
tronc

Reputation: 693

Enable zoom effect on jquery mobile

I want to enable the standard zooming effect in jquery mobile on my iOS iphone jqm 1.3.2 app.

I already tried this:

<meta name="viewport" id="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes" />

and

$(document).on("mobileinit", function () {
             $.mobile.defaultPageTransition = 'none';
             $.mobile.defaultDialogTransition = 'pop';

             $.mobile.pageLoadErrorMessage = 'Seitenladefehler';
             $.mobile.loadingMessage = 'Lädt...';
             $.mobile.dialog.prototype.options.closeBtnText = "Schließen";
             $.mobile.page.prototype.options.backBtnText = "Zurück";

             $.mobile.listview.prototype.options.filterPlaceholder = "Suchen...";

             $.mobile.activeBtnClass = 'unused';
             $.mobile.zoom.enabled = true;

             $.mobile.ajaxEnabled = true;

             //$.mobile.touchOverflowEnabled = true;

         });

Still no two finger zooming inside the jqm app. what am I missing?

Upvotes: 0

Views: 7855

Answers (1)

Jonathan Marzullo
Jonathan Marzullo

Reputation: 7051

why not remove the maximum-scale all together:

<meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=yes">

also on iOS, i believe user-scalable is set with a 1 instead of yes see the user-scalable spec

 <meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=1">

or trying also without user-scalable

<meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0">

maybe also through the jQuery Mobile API:

$(document).bind( "mobileinit", function(event) {
       $.extend($.mobile.zoom, {locked:false,enabled:true});
});

mobileinit event:

http://jquerymobile.com/demos/1.0b2/docs/api/globalconfig.html

See Reference:

W3C CSS Device Adaptation Spec

Upvotes: 2

Related Questions