Customizing Mobile WebViewer: "Fit Width” mode & embedding in iframe

[Support]

Q:

 

I have couple of question re: customizing mobile WebViewer:
 
+ We want to display the web viewer on iPad without full screen (e.g. some buttons below the web viewer), as attached screen. But the web viewer will re-direct to a page using the full page. Any way to do that? 
  
+ We want to display the PDF in “Fit Width” mode. In desktop mode, there is a setting for “Fit Mode” in web viewer, but not found in Mobile mode, please advise.

 

-----

A:

 

To display the WebViewer on an iPad without redirecting you'll have to make a change to WebViewer.js.  Look for the _createViewer function in WebViewer.js, and near the top you'll see if (this.isMobileDevice()) {...}.  Inside that if statement you can comment out the lines window.location = newLocation; and return;.  Commenting out these lines will stop the redirection.  You can try this out with our WebViewer Universal sample, but note that you'll have to load the unminified version of WebViewer.js with your change to see the effect.

 

In the past when experimenting with the viewer in an iframe on mobile devices we found that there were issues when using 100% width and height. However if you set a fixed width and height for the WebViewer div then it seems to behave well enough.  One thing to note is that when changing the device orientation the WebViewer won't change orientations as well since it's in an iframe, so if you want that behavior you may need to add some extra logic to pass the orientation event along to the iframe.  The default behavior may be fine for your application though.

 

To add a Fit Width mode you'll have to make some small additions to MobileReaderControl.js.  Basically you'll want to get the current total width of the visible pages, the current total width of the window and use that to calculate the amount you should change the zoom level by.  Then you can simply call setZoomLevel with the current zoom level multiplied by this change.

Here is some sample code:

var me = this;
var totalPageWidth = 0;
var currentZoom = me.docViewer.GetZoom();

me.forEachPageInWrapper(me.currentPageIndex, function(i) {
    var page = me.doc.GetPageInfo(i);

    totalPageWidth += page.width * currentZoom;
});

var zoomChange = exports.innerWidth / totalPageWidth;

me.setZoomLevel(zoomChange * currentZoom, false);

 

Then if you want you could add a new button or something similar and bind this functionality to it.

[Matt Parizeau]

As of WebViewer 1.6 the preferred way to disable page redirection on mobile devices is to add the option mobileRedirect: false.  For example:

myWebViewer = new PDFTron.WebViewer({
    mobileRedirect: false,
    ...
    ...
    ...
}, viewerElement);