Hello to all!
I have a problem in the development of my application and i hope that somebody of here can help me. 
I’m developing a cocos2d-html5 application that only work in landscape mode.
Initially i worked with a fixed canvas of 1024x768 and i developed all my application without problems
<canvas id="gameCanvas" width="1024" height="768"></canvas>
you can see the result in: http://pedagogiaescolar.com/where-s-timmy/
Now i’m developing a extension of this application for support a low resolutions (only in landscape mode) and i want to use the same images that i had originally (i don’t want have different images for the different resolutions)
i get my idea of this page:
http://www.cocos2d-x.org/wiki/Multi_resolution_support
but i can’t perform it.
I do the following:
Index.html: Principally i set the size of my canvas (scaled size) according with the original size (1024*768)
`
<!-- Standard -->
<meta charset="utf-8">
<title>WHERE IS TIMMY</title>
<link rel="icon" type="image/GIF" href="res/favicon.ico"/>
<link rel="stylesheet" href="css/style.css" />
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
</head>
<body>
<div id="landscapeContent">
<canvas id="gameCanvas" width="1024" height="768"></canvas>
</div>
<script type="text/javascript">
var canvas = document.getElementById('gameCanvas'),context = canvas.getContext('2d');
var screenWidth = window.innerWidth;
var screenHeight = window.innerHeight;
var designWidth = 1024;
var designHeight= 768;
if (screenHeight> screenWidth){
var screenWidth = window.innerHeight
var screenHeight = window.innerWidth;
}
if (screenWidth > designWidth && screenHeight>designHeight){
canvas.width = designWidth;
canvas.height = designHeight;
}else if (screenWidth > designWidth && screenHeight < designHeight){
canvas.width = getWidthScaled(screenHeight,designHeight,designWidth);
canvas.height = screenHeight;
} else if(screenHeight > designHeight && screenWidth < designWidth){
canvas.width = screenWidth
canvas.height = getHeightScaled(screenWidth,designWidth,designHeight);
}else{
var designAuxWidth = designWidth;
var designAuxHeight = designHeight;
var percent = 99;
while (designAuxWidth > screenWidth || designAuxHeight > screenHeight){
designAuxWidth = ((designWidth * percent)/100);
designAuxHeight= getHeightScaled(((designWidth * percent)/100),designWidth,designHeight);
percent--;
if (percent ==0)
break;
}
canvas.width = designAuxWidth;
canvas.height = designAuxHeight;
}
</script>
<script src="cocos2d.js"></script>
</body>
main.js: here i set the director.setContentScaleFactor and cc.EGLView.getInstance().setDesignResolutionSize according with the new canvas size.
`var cocos2dApp = cc.Application.extend({
config:document[‘ccConfig’],
ctor:function (scene) {
this._super();
this.startScene = scene;
cc.COCOS2D_DEBUG = this.config[‘COCOS2D_DEBUG’];
cc.initDebugSetting();
cc.setup(this.config[‘tag’]);
cc.AppController.shareAppController().didFinishLaunchingWithOptions();
},
applicationDidFinishLaunching:function () {
if(cc.RenderDoesnotSupport()){
alert(“Browser doesn’t support Canvas or WebGL”);
return false;
}
var director = cc.Director.getInstance();
var designSize = cc.EGLView.getInstance().getFrameSize();
var resourceSize = cc.size(1024, 768);
director.setContentScaleFactor(resourceSize.width / designSize.width);
cc.EGLView.getInstance().setDesignResolutionSize(designSize.width, designSize.height, cc.RESOLUTION_POLICY.SHOW_ALL);
director.setAnimationInterval(1.0 / this.config['frameRate']);
//load resources
cc.LoaderScene.preload(g_ressources, function(){
director.replaceScene(cc.TransitionFade.create(transitionTime*2,new this.startScene(),cc.c3b(255, 255, 255)));
}, this);
return true;
}
});
var myApp = new cocos2dApp(bookScene);`
All of this seems not work correctly.
You can see the result here: http://pedagogiaescolar.com/where-s-timmy-full/
(in mobile device isn’t scaled good)
Thanks in advance!
PD: Sorry for my english.