Device detection

[Meowts]

So, I'm not sure if this is within the scope of Phaser, but I've come across an interesting challenge - specifically determining between iPhone 4, 4S, and 5.

 

The problem (in Phaser): When detecting iPhone 4, it checks to see if the pixel ratio is 2. iPhone 5 uses a pixel ratio of 2 as well. Therefore Phaser can't tell the difference between 4 and 5.

 

The bigger problem: So far in my searching, the only JS solution to determining the device is to look at the iOS version. The issue here is that 4S is shipped with iOS 5, so this creates a flaw in this method. Also, after testing this method, I share it with my colleague who has an iPhone 4 - but whoops, he has iOS 7 installed, so it loads as though it's loading with iOS 5. Clearly checking the iOS version isn't the solution. Here's the code I have to get a better idea of what I'm going for (in index.html):

var device = new Phaser.Device();var deviceSet = false;			if(/(iPhone|iPod|iPad)/i.test(navigator.userAgent)) {   if(/OS [2-4]_\d(_\d)? like Mac OS X/i.test(navigator.userAgent)) {      // iOS 2-4      var game = new Phaser.Game(960, 640, Phaser.AUTO, 'gameContainer');    deviceSet = true;  }   else if(/CPU like Mac OS X/i.test(navigator.userAgent)) {    // iOS 1    var game = new Phaser.Game(1136, 640, Phaser.CANVAS, 'gameContainer');    deviceSet = true;  }   else {    // iOS 5    var game = new Phaser.Game(1136, 640, Phaser.CANVAS, 'gameContainer');    deviceSet = true;  }}		else if(!deviceSet && device.desktop){  var game = new Phaser.Game(1136, 640, Phaser.CANVAS, 'gameContainer');}else{//All other devices (for now)  var game = new Phaser.Game(960, 640, Phaser.CANVAS, 'gameContainer');}			delete device;

This might seem like an awful lot of work to cut off a section of the game, but it's a requirement for the project I'm working on. Another solution I've looked at (though I'm not familiar with) is writing a server-side script to determine the device, and directing the user to an appropriate page (instantiating the game with the proper dimensions).

 

The crux here is that scaling the game isn't an option.

 

Anyway, interesting problem, and like I said I'm not sure whether it's up to Phaser to handle this (though checking between iPhone 4 and 5 would be handy), but I just thought I'd check to see if anyone has dealt with this problem before.

 

Note: I'll bet there's a much easier way to accomplish what I'm going for.

[Starboar]

Maybe i've misunderstood but can't you use window.innerWidth and innerHeight to determine game size?   

[Videlais]

Adding on to what @Starboar wrote, have you tried something like the following?

var width = window.innerWidth * window.devicePixelRatio;var height = window.innerHeight * window.devicePixelRatio;

It would detect the full available width and height, as Starboar wrote, and take into account the devicePixelRatio too.

 

Of course, this also introduces the problem of scaling your assets according to the game world. This thread covers some different techniques other people have been using for that. But, basically, it is playing around with game.stage.scale options and finding one that matches your project's needs.

[Meowts]

Lol, I knew I was overthinking it. Problem solved! Did end up learning things either way