Scaling Tilemap

[traxtrack]

I am trying to scale things properly but I have huge issues, I read other topics like meine but the solutions did not work out, I cant figure out where my issue is. Thanks in advance guys.


1. So this part of the code makes my bg image look good on any device, but I cant use this to set the image to autoscroll on th Y axis:

scaleRatio = window.devicePixelRatio / 3;

    var road =  game.add.image(game.world.centerX, game.world.centerY, 'road');
    road.scale.setTo(scaleRatio, scaleRatio);
    road.anchor.set(0.5);

2. So after some research I am doing this:

    road = game.add.tileSprite(scaleRatio, scaleRatio, 800, 600, 'road');
    road.width =  game.world.width;
    road.height = game.world.height;

The problem with this code is that the background image wont scale right on mobile devices. on devices with window.devicePixelRatio == 2 the image will be huge, it wont even resize at all.



In case some is wondering this is my config setup:

console.log('Game state loaded');

scaleRatio = window.devicePixelRatio / 3;

// var carTurnSpeed = 150;
var countcars = 0;
var car;
var obstacleGroup;
var canMove = true;
var goleftonce = 2;
var gorightonce = 2;




// OBSTACLES vars
var obstacleSpeed = 800;
var obstacleDelay = 700;
var platforms;
var score;



// Get device sizes
var w = window.innerWidth * window.devicePixelRatio;
var h = window.innerHeight * window.devicePixelRatio;

var game = new Phaser.Game(w, h, Phaser.CANVAS, '', {
  render: render,
 });

game.state.add('boot', bootState);
game.state.add('load', loadState);
game.state.add('menu', menuState);
game.state.add('play', playState);
game.state.add('gameover', gameoverState);


game.state.start('boot');