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
alphadash0
Posts: 4
Registered: ‎04-10-2013
My Device: 9790

Correct size for an HTML5 app

Hey guys

 

I have a little problem concerning my html5 app. I need the correct size for my canvas which I want to scale up with my viewport on factor one. My canvas is now 364px in width and 640px in height which is the size for half of the Z10 resolution. The problem is that scrollbars appear and my canvas is not displayed completely. 

 

So what size do should I choose for my canvas? Here is my viewport code so that you can see what I'm up to :smileyhappy:

 

<meta name="viewport" content="width=384, height=640, initial-scale=1, user-scalable=no">

 

Thanks and regards 
Simon

Please use plain text.
Retired
mimendoza
Posts: 64
Registered: ‎06-04-2012
My Device: Blackberry Z10

Re: Correct size for an HTML5 app

Please see this resource for setting up your viewport: http://supportforums.blackberry.com/t5/Web-and-WebWorks-Development/How-to-set-up-the-viewport-for-a...
----------------------------------------------------------------------------------
- Did this post help solve the issue? Click on "Accept as Solution"
- Was the content of this post helpful? Please give it a "Thumbs Up"

developer.blackberry.com
@BlackBerryDev
Please use plain text.
New Contributor
alphadash0
Posts: 4
Registered: ‎04-10-2013
My Device: 9790

Re: Correct size for an HTML5 app

That's what I have tried but it's not helpfull in my case. I just wanted to scale up my canvas to double size because of the performance :smileyhappy:

Please use plain text.
BlackBerry Development Advisor
chadtatro
Posts: 620
Registered: ‎10-01-2009
My Device: Z10

Re: Correct size for an HTML5 app

If you want to basically zoom in your your 'half-screen-sized' app, so that it appears as full screen couldn't you just set initial-scale to 2?  I haven't tried this myself, but in theory it makes sense :smileywink:

 

Chad Tetreault | App Development Consultant | BlackBerry Developer Relations | developer.blackberry.com | @chadtatro
Please use plain text.
New Contributor
alphadash0
Posts: 4
Registered: ‎04-10-2013
My Device: 9790

Re: Correct size for an HTML5 app

Thats what I did but it doesn't do the trick :smileysad: i get scrollbars which is not got at all
Please use plain text.
BlackBerry Development Advisor
chadtatro
Posts: 620
Registered: ‎10-01-2009
My Device: Z10

Re: Correct size for an HTML5 app

Just like this?

 

<head>
    <script>
	var meta = document.createElement("meta");
	meta.setAttribute('name','viewport');
	meta.setAttribute('content','initial-scale=2,user-scalable=no');
	document.getElementsByTagName('head')[0].appendChild(meta);
   </script>
</head>

 

If so, you could set your body to 'absolute' to essentially lock the application in place

 

<style>
   body {
       position: absolute;
       top: 0;
       left: 0;
   }
</style>

 

Chad Tetreault | App Development Consultant | BlackBerry Developer Relations | developer.blackberry.com | @chadtatro
Please use plain text.
New Contributor
alphadash0
Posts: 4
Registered: ‎04-10-2013
My Device: 9790

Re: Correct size for an HTML5 app

Yes I have tried this. Actually scale set to 1 is allready the double size :-/

Please use plain text.
BlackBerry Development Advisor
anzor_b
Posts: 165
Registered: ‎09-24-2012
My Device: Passport

Re: Correct size for an HTML5 app

This is what I use to ensure body does not overflow content: 

 

html,body {
       position: fixed,
       width:100%;
height: 100%;
overflow: hidden; }

Yes scale 1 returns the CSS pixels, so 342 x 571, make sure the canvas does not overflow these dimensions.

 

Please use plain text.