Proper text scaling with pixi.js?
<p>What am I doing wrong? When I add simple text to my stage, it looks fine on the desktop, but on mobile it renders completely differently (size position etc).  </p>

<p>How do I get it to consistently display the same thing on different devices?  </p>

<p>The game cannot have a static pixel size, it needs to scale to the browser window size, but keep its aspect ratio.</p>

<p>I set up a complete demo to demonstrate the problem:</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;style&gt;
      #game {
          position: absolute;
      }
      html,body {
          padding:0;
          margin:0;
          height:100%;
          width:100%;
          background-color: #000000;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id="game"&gt;&lt;/div&gt;
    &lt;script src="https://raw.githubusercontent.com/pixijs/pixi.js/master/bin/pixi.min.js"&gt;&lt;/script&gt;
    &lt;script&gt;
        var gameElem = document.getElementById('game');
        var GAME_WIDTH = Math.max(window.screen.width,window.screen.height);
        var GAME_HEIGHT = GAME_WIDTH/16*9;

        var renderer = PIXI.autoDetectRenderer(GAME_WIDTH, GAME_HEIGHT,{backgroundColor : 0x000000});
        gameElem.appendChild(renderer.view);

        // create the root of the scene graph
        var stage = new PIXI.Container();

        var textOptions = {
            font: 'bold 64px Roboto', // Set style, size and font
            fill: '#333333', // Set fill color to blue
            align: 'center', // Center align the text, since it's multiline
            stroke: '#dddddd', // Set stroke color to a dark blue-gray color
            strokeThickness: 20, // Set stroke thickness to 20
            lineJoin: 'round' // Set the lineJoin to round instead of 'miter'
        }

        var topText = new PIXI.Text('Some text to do testing!', textOptions);
        topText.anchor.x = 0.5;
        topText.anchor.y = 0.5;
        topText.x = GAME_WIDTH / 2;
        topText.y = GAME_HEIGHT / 2-150;
        stage.addChild(topText);

        autoSetRenderSize(gameElem);
        window.addEventListener("resize", function() {autoSetRenderSize(gameElem)});

        function autoSetRenderSize(container){
            ratio = Math.min(window.innerWidth/GAME_WIDTH, window.innerHeight/GAME_HEIGHT);
            stage.scale.x = stage.scale.y = ratio;
            var newWidth = Math.ceil(GAME_WIDTH * ratio);
            var newHeight = Math.ceil(GAME_HEIGHT * ratio);
            renderer.resize(newWidth, newHeight);
            container.style.top = (window.innerHeight-newHeight)/2 + 'px';
            container.style.left = (window.innerWidth-newWidth)/2 + 'px';
            renderer.render(stage);
        }
    &lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>On device with screen resolution of 1920x1080:
<a href="https://i.stack.imgur.com/HGr45.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HGr45.jpg" alt="enter image description here"></a>
On device the screen resolution of 320x480:
<a href="https://i.stack.imgur.com/pkzko.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pkzko.jpg" alt="enter image description here"></a></p>

<p>This does not happen when you just change your browser size.</p>