Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Reply
Highlighted
Developer
Posts: 41
Registered: ‎07-28-2009
My Device: Passport
My Carrier: T-Mobile USA
Accepted Solution

Why is 'user-scalable=no' not preventing panning and zooming?

[ Edited ]

I'm building my first html5 app and I have the following on my meta tag. 

 

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

 

However, I found that I'm still able to zoon and pan around the page.   I thought 'user-scalable=no' was supposed to prevent that.  Any thoughts on why that's the case?   Is my meta tag incorrect?  

 

My meta tag is within the <head></head> tags.

Retired
Posts: 165
Registered: ‎09-24-2012
My Device: Passport
My Carrier: Bell

Re: Why is 'user-scalable=no' not preventing panning and zooming?

Hi MiserT.

 

This works for me:

 

<meta name="viewport" content="initial-scale=1, user-scalable=no" />

 Are you using any frameworks? They may be overriding this meta tag. If you use Web Inspector, expand the head tag in the Elements tab and make sure the meta tag is still there.

 

Also test with a basic HTML file, to make sure it isn't the framework you are using that's causing this.

Developer
Posts: 41
Registered: ‎07-28-2009
My Device: Passport
My Carrier: T-Mobile USA

Re: Why is 'user-scalable=no' not preventing panning and zooming?

Still having trouble with this, it's frustrating me to no end! 

 

I noticed that when using the ripple viewer everything looks fine.  But once I load it onto the simulator or on my Z10, zoom is enabled. 

 

i thought it ws my code so I decided to check the tutorial example.  (https://developer.blackberry.com/html5/documentation/tutorial_javascript_geolocation.html)   Sure enough, I found that I was able to zoom in on the screen even though it also had user-scalable=no set for the viewport. 

 

Is this a bug in webworks or the BB Browser in 10.1?  

 

 

Developer
Posts: 41
Registered: ‎07-28-2009
My Device: Passport
My Carrier: T-Mobile USA

Re: Why is 'user-scalable=no' not preventing panning and zooming?

Oooh.. so on the hellogeo app this javascript seems to work.   The static viewport metatag doesn't seem to do it.   This appears to work by dynamically setting the initial-scale ratio based on the device pixel ratio.  

 

<script>

     var meta = document.createElement("meta");

     meta.setAttribute('name','viewport');

     meta.setAttribute('content','initial-scale='+ (1/window.devicePixelRatio) + ',user-scalable=no');

     document.getElementsByTagName('head')[0].appendChild(meta);

</script>

 

 

Now on to try this on my actual app and hope it works.. 

 

---------

 

BTW I got that info from the following article.

 

http://supportforums.blackberry.com/t5/Web-and-WebWorks-Development/How-to-set-up-the-viewport-for-a...