iPhone 5 and full canvas width

Question

Okay, so my iPhone 5 arrived (I live in Australia and am lucky to have it before the US) and the first thing I wanted to do was take full advantage of the 88 pixels of extra width for my 2D platformer using the Impact JS engine.

I cannot get my head around how to actually modify the canvas width.

This is what I was using previously:

ig.main('#canvas', MyGame, 60, 240, 160, 2);

Now, I thought it would've been as easy to just increase the 240 by 44 pixels (considering there's 44 pixels on either side in landscape):

ig.main('#canvas', MyGame, 60, 284, 160, 2);

However, I'm still seeing 44 pixels black bars on either side after the above code change.

Not sure whether I have to modify any other Impact engine files in order to get this working. I haven't played around with it enough as I'm at work at the moment and shouldn't really be working on my game. I'm sure there's a few other areas I'll have to modify to get this working.

Btw, I'm using iOSImpact and deploying my game directly to my iPhone 5, so there may be files within there that need to be updated as well.

Also I noticed the following properties for detection between mobile devices. I'd need to throw in an ig.ua.iPhone5 property in here as well.

ig.ua.pixelRatio = window.devicePixelRatio || 1;

ig.ua.viewport = {
    width: window.innerWidth,
    height: window.innerHeight
};

ig.ua.screen = {
    width: window.screen.availWidth * pixelRatio,
    height: window.screen.availHeight * pixelRatio
};

ig.ua.iPhone = /iPhone/i.test(navigator.userAgent);
ig.ua.iPhone4 = (iPhone && pixelRatio == 2);
ig.ua.iPhone5 = ??
ig.ua.iPad = /iPad/i.test(navigator.userAgent);
ig.ua.android = /android/i.test(navigator.userAgent);
ig.ua.webos = /hpwos/i.test(navigator.userAgent);
ig.ua.iOS = iPhone || iPad;
ig.ua.mobile = iOS || android || webos;

I did a console.log on the following and this is what it returns:

ig.ua.viewport.width = 640

ig.ua.viewport.height = 960

ig.ua.screen.width = 1280

ig.ua.screen.height = 1920

I'm a little confused with the above results as well, specifically the ig.ua.viewport.width returning 960. I would've thought it should be returning 1136.

Answer 1

Your app has to tell the OS that it supports the taller/wider screen. I think this is done by specifying a startup image of that size. Otherwise, you'll be run in compatibility mode and not get to use the full screen