Search code examples
jqueryjquery-mobilecordovaibm-mobilefirst

IBM Worklight 6.0 - How to prevent Zoom and Scroll in applications?

We are using the worklight 6 with jQuery Mobile to develop an app.

In a HTML page it is normal for users on smartphones or tablets to use pinch & zoom with two fingers and scroll the page even in a page without scroll (environment effect).

I'd like to know how can I disable these effects when using Worklight, jQuery Mobile, PhoneGap or Cordova.

The following link (image of iOS example) shows our problem with the scroll. And when we use the zoom the same black background is shown: https://dl.dropboxusercontent.com/u/15801306/IMG_0222.JPG

Solution

    1. To disable the pinch & zoom effect you can try a meta tag as described in: How do you disable viewport zooming on Mobile Safari?

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

    2. There are several approaches to disabling scrolling. For exaample, as described in: http://workfunc.com/how-to-disable-scrolling-on-mobile/

      • Via jQuery:
      $(document).bind('touchmove', function(e) {
    e.preventDefault();
});
      • Or w/out jQuery (pure JS):
      document.addEventListener('touchmove', function(e) {
  e.preventDefault();
}, false);

    3. If you'd like to disable the scrolling only in the viewport, see these questions: