XeppeX
October 1, 2014, 11:23am
#1
Hi,
I made a game in cocos2d-js and when I open it on the browser on iOS it is ok in portrait mode but when
I rotate the device the canvas stays the same size without scaling to the whole width. On android device
it is working and on computer it is working too.
Index code snippet
<body style="padding:0; margin: 0; background: #FFFFFF;">
<canvas id="gameCanvas" width="1176" height="784"></canvas>
<script src="frameworks/cocos2d-html5/CCBoot.js"></script>
<script src="main.js"></script>
</body>
main.js
cc.view.setDesignResolutionSize(960, 640, cc.ResolutionPolicy.SHOW_ALL);
cc.view.resizeWithBrowserSize(true);
Any ideas on what I need to add or what I could have done wrong?
Tyvm
Friendly regards,
XeppeX
Hi, XeppeX
Did you find the solution to this problem?
XeppeX
October 21, 2014, 12:41pm
#3
No not really, I did try a work around in the CCEGLView.js
But it is not working on every iPad, I think it works on most iphones
Warning: this is probably a dirty fix because of a deadline
resizeWithBrowserSize: function (enabled) {
var adjustSize, _t = this;
if (enabled) {
//enable
if (!_t.__resizeWithBrowserSize) {
_t.__resizeWithBrowserSize = true;
adjustSize = _t._resizeEvent.bind(_t);
cc._addEventListener(window, 'resize', adjustSize, false);
if(cc.sys.isMobile === true && cc.sys.os === cc.sys.OS_IOS) {
cc._addEventListener(window, 'orientationchange', adjustSize, false);
}
}
} else {
//disable
if (_t.__resizeWithBrowserSize) {
_t.__resizeWithBrowserSize = true;
adjustSize = _t._resizeEvent.bind(_t);
window.removeEventListener('resize', adjustSize, false);
}
}
},
_initFrameSize: function () {
var locFrameSize = this._frameSize;
//To get the most likely for the actual display resolution data
var sWidth = Math.min(window.screen.availWidth, window.screen.width) * window.devicePixelRatio;
var sHeight = Math.min(window.screen.availHeight, window.screen.height) * window.devicePixelRatio;
if(cc.sys.isMobile === true && cc.sys.os === cc.sys.OS_IOS && Math.abs(window.orientation) === 90 && sWidth < sHeight) {
var tmpHeight = sHeight,
tmpWidth = sWidth;
sWidth = tmpHeight;
sHeight = tmpWidth;
}
//Calibration of the actual resolution may be smaller
if(cc.sys.isMobile && this._frame.clientWidth >= sWidth * 0.8){
locFrameSize.width = sWidth / window.devicePixelRatio;
}else{
locFrameSize.width = this._frame.clientWidth;
}
if(cc.sys.isMobile && this._frame.clientWidth >= sHeight * 0.8){
locFrameSize.height = sHeight / window.devicePixelRatio;
}else{
locFrameSize.height = this._frame.clientHeight;
}
},
There is something wrong with the size of the canvas I think. The width is always bigger than the height even if you turn around. =/
Freindly regards,
XeppeX
1 Like
Indeed, it’s a confirmed bug and have been fixed for the next release.
Temporarily please modify the _initFrameSize
function like this :
_initFrameSize: function () {
var locFrameSize = this._frameSize;
locFrameSize.width = this._frame.clientWidth;
locFrameSize.height = this._frame.clientHeight;
},
XeppeX
October 22, 2014, 11:43am
#5
Well thats seems to be a better fix than mine haha
Tyvm!