0

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

Idan Adar
  • 44,156
  • 13
  • 50
  • 89
simprão
  • 150
  • 1
  • 5
  • hi have added this tag and tried.. – codebreaker Nov 13 '13 at 12:42
  • Hi i'm using the tag , i saw that your tag has 'user-scalable=no' and mine tag has "maximum-scale=1.0, target-densityDpi=device-dpi" do you know the difference? – simprão Nov 13 '13 at 13:18
  • The problem just occurs on iOS and Windows environments, on android the zoom and scroll is disabled, I think by this tag. – simprão Nov 13 '13 at 13:22

2 Answers2

1

to prevent application from page scroll (UIWebView "bounce") in a worklight way (MFP 7.0), find

apps\your_app_name\iphone\native\config.xml

and make

<preference name="DisallowOverscroll" value="true" />

Sam Su
  • 6,532
  • 8
  • 39
  • 80
0

  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:

Community
  • 1
  • 1
Idan Adar
  • 44,156
  • 13
  • 50
  • 89
  • Hi, we are using the tag and now we added on content the property user-scalable=no, then now the zoom is locked, but the user can use the scroll effect yet, there is some property that I can lock this effect? – simprão Nov 13 '13 at 15:43
  • Hi Idan, we've tried and really works. But this solution locks all scroll on the app and we have some pages that uses scroll. We just wanna lock the scroll of the viewport. – simprão Nov 13 '13 at 17:36