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
New Contributor
Posts: 3
Registered: ‎03-26-2013
My Device: BB10 Dev
Accepted Solution

Prevent zoom on text input focus on BlackBerry 10

I have a BB10 WebWorks app which uses the following meta tag:

 

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

 

And I want to disable the zoom that occurs when the user taps on a text input to give it focus.

 

I've also tried using the HandheldFriendly meta tag to no avail:

 

<meta name=”HandheldFriendly” content=”True” />

Am I missing something?

BlackBerry Development Advisor
Posts: 627
Registered: ‎10-01-2009
My Device: Z10

Re: Prevent zoom on text input focus on BlackBerry 10

[ Edited ]

Hello,

 

You should be setting the viewport like this which will prevent any nasty zooming accidents:

 

There's also a KB Article on the viewport here: http://supportforums.blackberry.com/t5/Web-and-WebWorks-Development/How-to-set-up-the-viewport-for-a... 

 

<head>
    <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>
</head>
Chad Tetreault | App Development Consultant | BlackBerry Developer Relations | developer.blackberry.com | @chadtatro
New Contributor
Posts: 3
Registered: ‎03-26-2013
My Device: BB10 Dev

Re: Prevent zoom on text input focus on BlackBerry 10

Hi, thanks for the reply. Setting the viewport as in that code sample simply causes the CSS pixels to be equivalent to the physical pixels, i.e. it makes my UI very small.

 

This also doesn't solve the behaviour of the viewport zooming in to the text input when it receives focus. By the way, I see this behaviour on one input, but not another... I'm investigating the differences between the two.

New Contributor
Posts: 3
Registered: ‎03-26-2013
My Device: BB10 Dev

Re: Prevent zoom on text input focus on BlackBerry 10

Turns out I can only reproduce this on a Dev Alpha device; the behaviour does not occur on a Z10. Chalk this one up to pre-release software, I suppose!

Developer
Posts: 171
Registered: ‎08-20-2008
My Device: Not Specified

Re: Prevent zoom on text input focus on BlackBerry 10

I seem to be getting this problem using physical Z10 and on the latest VM. Seems to happen when repeatedly hitting the backspace key. I'm using Sencha Touch and have tried their viewport config as well as that above with no affect.