Scaling and Resolution of Window/Assets for Desktop and Mobile

[dewder]

I've been looking for information on how to control scaling and resolution of the window, asset, gui, etc. but can't seem to find exactly what I'm looking for amongst the comments/tutorials. 

If a game were to be released for both standalone desktop (nw.js) and ios/android then it would probably have to support a fair few resolutions and aspect ratios:

1366x768	16:9	19.1%	14'' Notebook / 15.6'' Laptop / 18.5'' monitor
1920x1080	16:9	9.4%	21.5'' monitor / 23'' monitor / 1080p TV
1280x800	8:5	8.5%	14'' Notebook
320x568	9:16	6.4%	4'' iPhone 5
1440x900	8:5	5.7%	19'' monitor
1280x1024	5:4	5.5%	19'' monitor
320x480	2:3	5.2%	3.5'' iPhone
1600x900	16:9	4.6%	20'' monitor
768x1024	3:4	4.5%	9.7'' iPad
1024x768	4:3	3.9%	15'' monitor

 

That was 2014, I'm sure it's just as diverse in 2016. With that in mind, how the hell do you scale things accounting for those variations?

Is there a way to have a resolution option (on desktop), like most desktop games? And if so how would one account for that when sizing UI/Assets/World?

So far, working with: (would of used code tags but I don't think they're working, it's just all on one line. Or is it just me?)

var SCREEN_WIDTH = window.innerWidth * window.devicePixelRatio;
var SCREEN_HEIGHT = window.innerHeight * window.devicePixelRatio;

var SCREEN_RATIO = SCREEN_WIDTH / SCREEN_HEIGHT;

var SCALE_RATIO;

if (SCREEN_RATIO > 1) {
    SCALE_RATIO = SCREEN_HEIGHT / SCREEN_WIDTH;
} else {
    SCALE_RATIO = SCREEN_WIDTH / SCREEN_WIDTH;
}

var game = new Phaser.Game(SCREEN_WIDTH, SCREEN_HEIGHT, Phaser.AUTO, null, {preload: preload, create: create, update: update});

function preload() { 
    game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
    game.scale.pageAlignHorizontally = true;
    game.scale.pageAlignVertically = true;
}

...

grid.tileSize    = 30 * SCALE_RATIO;

 

Seems to be missing something, as positioning doesn't seem to line up. Is there something else that I should be doing other than sizing/positioning everything based aspect ratio like the grid.tileSize above?

The post is based on a camera/world where everything is visible and there's no panning, like looking down at a board game, so nothing would be off screen and everything has to fit.

Thanks for any help and/or tips.

Kind regards,
A Phaser nub.