iOS browser canvas not scaling on rotation

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?

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;
},

Well thats seems to be a better fix than mine haha :smiley:
Tyvm!