iPhone 5 and full canvas width

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.

Answers


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


Need Your Help

Separator between visible elements

html css border

I have a similar problem like Separators between elements without hacks, but do not want to show the separator if the element on the left left or right is invisible.

ASP.NET MVC 5 (Framework 4.5.2) BundleConfig Jquery JqGrid Cant Find Images

jquery asp.net-mvc jqgrid bundle

SOLVED : I do not believe the problem was this: http://forums.iis.net/t/1148674.aspx?can+t+seem+to+load+images+with+iis7

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.