How to scale the game canvas?

cocos2d-x JavaScript
#1

Hi guys,
On iPhone (iOS 7.0), when in landscape and click the top border of the screen, the navigation bar will appear, that cant be solved by adding the meta of minimal-ui. On that condition, we want to scale down the game canvas to fit the new blank area, how can i do that?

#2

If i scale the canvas myself

cc._canvas.style.width = window.innerWidth+ “px”;
cc._canvas.style.height = window.innerHeight+“px”;
The game did have been scaled, but the button cant be clicked anymore!
Anybody know about this?

#3

Hi, you can use cc.view's API, try this:

cc.view.setDesignResolutionSize(width, height, cc.ResolutionPolicy.SHOW_ALL);
// It's useful only when resolution policy is used.
cc.view.resizeWithBrowserSize(true);

Then the view will be automatically resized when window size change.

You can also register your custom behavior with

cc.view.setResizeCallback(function() {
});
#4

@pandamicro, thank you for your reply!
But i tried that, and failed to solve the issue.
My game design resolution is 800*500. When the toolbar appear, the window.innerHeight become smaller, but the cc._canvas.height is still 500.
If i use
cc.view.setDesignResolutionSize(window.innerWidth, window.innerHeight, cc.ResolutionPolicy.SHOW_ALL);
The game will be scaled up much instead of scaled down.
if i use
cc.view.setDesignResolutionSize(800, 500, cc.ResolutionPolicy.SHOW_ALL);
Nothing changed!
Thanks again!

#5

you can try this

cc.view.setResizeCallback(function() {
// control every thing you want, readapt with setDesignResolutionSize for example, or manually change your canvas with cc._canvas object
});
#6

Thanks again @pandamicro

#7

@longyangxi I have the same problem.Are you solve the problem? If yes,plz let me Know the solution.
Tks .