How do I deactivate the pinch-zoom inside mobile webviewer?

121 views
Skip to first unread message

Support

unread,
Apr 10, 2014, 6:28:49 PM4/10/14
to pdfnet-w...@googlegroups.com
Q:  I would like to deactivate the pinch-zoom inside the mobile webviewer.

 

I've found quite a lot of discussions about this here and there, but nothing seems to work for me (and frighteningly enough, some people seem to state that it's just not possible). I've basically tried various <meta name="viewport"> attributes combinations in both our index.html and your MobileReaderControl.html.

 

We do not work on iOS devices, only on Android tablets (not phones) (and we hope it will work on Windows 8 too). I test with a Galaxy Note 10.1" and the latest versions of Chrome and Firefox.

 

Can you help? We need to have full and definite control on the zoom level.

---------
A:

We actually disable the browser's pinch zoom by setting the viewport meta tag in MobileReaderControl.html. The pinch zooming in WebViewer is actually our own custom code that transforms canvases, so to disable it you'll have to remove some code inside MobileReaderControl.js. Unfortunately there isn't an easier way to deactivate this but there are only two blocks of code that need to be removed.

 

Find the onTouchStart function in MobileReaderControl. Remove the first part of the if statement that starts with if (evt.originalEvent.touches.length > 1) {. Keep the "else if" part and just turn it into an if.

 

Find the onTouchMove function. Find the else if that starts with else if (evt.originalEvent.touches.length > 1) {. Remove the entire "else if" block.

Michael Lee

unread,
Nov 28, 2016, 1:02:16 PM11/28/16
to PDFTron WebViewer
We override in the config file to turn-off this feature for iOS due to UIWebView crashing consistently.

-

ReaderControl.prototype.onTouchStart = function(evt) {

var me = this;

me.restartTouchTimeout();
me.docViewer.trigger("PAUSE");
me.c.$e.removeClass('animated');

if (evt.originalEvent.touches.length === 1) {
me.oldTouch.x = evt.originalEvent.touches[0].clientX;
me.oldTouch.y = evt.originalEvent.touches[0].clientY;
}

};

ReaderControl.prototype.onTouchMove = function(evt) {

var me = this;

me.restartTouchTimeout();

var touch0;
var touch1;
// don't pan in annotation create mode
if (me.isInToolbar(evt.target) || me.isSliding || me.annotMode || me.isWidgetTargetType(evt.target.type)) {
return;
}

var width = me.c.$e.width();
var height = me.c.$e.height();

if (evt.originalEvent.touches.length === 1 && !me.isPinching) {
touch0 = evt.originalEvent.touches[0];
me.$viewerWrapper.removeClass('animated');
var scrollX = me.oldTouch.x - touch0.clientX;
var scrollY = me.oldTouch.y - touch0.clientY;

if (!me.isZoomedIn()) {
 // Perform horizontal scrolling.

 me.vwxPos = me.vwxPos - scrollX;
 me.transform(me.$viewerWrapper, me.vwxPos, 0);
} else {
 // Scrolled the zoomed in wrapper.

 me.c.tY = me.c.tY - scrollY;
 me.c.tX = me.c.tX - scrollX;
 me.transform(me.c.$e, me.c.tX, me.c.tY, me.newScale);

 me.shouldRerender = true;
 me.cancelPageRenders();
}

me.oldTouch.x = touch0.clientX;
me.oldTouch.y = touch0.clientY;

}

};

-
Reply all
Reply to author
Forward
0 new messages