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: 23
Registered: ‎02-13-2013
My Device: Blackberry 10
My Carrier: IDEA

Blackberry 10 zooming problem with HTML5

Hi,

 

I have a problem with the approval of my HTML5 apps.

 

Almost all of my apps are denied stating, "After installing your application on BlackBerry Dev Alpha, when double tap the screen, the image suddenly zooming, please fix the issue."

 

Actually I don't have that problem when I install my app on emulator. I dont have a device to test.

 

I use the following meta code on all of my pages.

 

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

 

Anything else to be done?

Contributor
Posts: 38
Registered: ‎03-07-2012
My Device: Dev Alpha B, Playbook 16GB, Z10 LE
My Carrier: Bell Canada

Re: Blackberry 10 zooming problem with HTML5

Have you seen this post?

 

Regards

DM

------------
"The shortest answer is doing." - Jacula Prudentum
My app: Cashalyst
Developer
Posts: 1,229
Registered: ‎03-20-2011
My Device: Playbook, Z10 LE, Dev Alpha B, 2x Dev Alpha C
My Carrier: 3, Orange, Vodafone

Re: Blackberry 10 zooming problem with HTML5

DM is right - that will get you thru approval

 

I'd like to add a little to the code you see in the article as it makes everything more portable

 

I use this (and will prob add to it)

 

<script type="text/javascript">
	var isbb=navigator.userAgent.match(/BB10|PlayBook/i);
	var isdesktop=navigator.platform.match(/MacIntel|Win32|Win64/i);
	var dpr = false;
	
	if(typeof window.devicePixelRatio != 'undefined')
		{
		dpr = window.devicePixelRatio;
		}
	
	if(!isdesktop)
		{
		var meta = document.createElement("meta");
		meta.setAttribute('name','viewport');
		if(dpr)
			{
			meta.setAttribute('content','initial-scale='+ (1/window.devicePixelRatio) + ',user-scalable=no');
			}
		else
			{
			meta.setAttribute('content','user-scalable=no,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,width=device-height,width=device-height');
			}
		document.getElementsByTagName('head')[0].appendChild(meta);
		}
</script>

 

Its not perfect yet (far from it) but it works very nicely as it falls thru for everything I write on

 

Two handy vars I declare are isbb and isdesktop

 

There are better ways of detecting BB but the API won't have loaded when this executes

 

Stick it right at the top of your <head>...</head> just after <title>...</title>

 

As I say - needs additions but it works really well on BB 7, PB and 10




Click the like button if you find my posts useful!
Retired
Posts: 1,382
Registered: ‎07-02-2009
My Device: BlackBerry Bold 9900
My Carrier: Bell

Re: Blackberry 10 zooming problem with HTML5

Hey Azeem,

 

I suspect the viewport you are providing is either being ignored, or your application is displaying content that is independant of that viewport (e.g. are you loading any childbrowser controls or using an iFrame?).

 

As others have commented already, the viewport you have provided will cause content to appear incorrectly scaled on BlackBerry 10 devices (due to the high screen resolution). The KB article linked by DM describes the right approach for resolving this issue.

 

Cheers,

 

Follow me on Twitter: @n_adam_stanley
-------------------------------------------------------------------------------------------------------------------------
Your app doesn't work? Use BlackBerry remote web inspector to find out why.
Developer
Posts: 23
Registered: ‎02-13-2013
My Device: Blackberry 10
My Carrier: IDEA

Re: Blackberry 10 zooming problem with HTML5

@administrator

 

I dont use any iFrame or childbrowser elements. I used the same code and they were accepting my apps when there was only 'Dev Alpha' and 'All touch'. Now with 'Z10' and 'Q10' they dont accept the old code.

 

I had look at the KB article and both methods seem to work in the emulator. I dont have a device to test.

 

I submitted the app with new code and waiting for the certification now.

 

Why would the old code be ignored by the device?