0
私は間違って何をしていますか？私のステージにシンプルなテキストを追加すると、デスクトップ上では見た目がよく見えますが、モバイルでは完全に異なったレンダリングが行われます（サイズ位置など）。pixi.jsによる適切なテキストスケーリング？
同じデバイスをさまざまなデバイスに一貫して表示するにはどうすればよいですか？
ゲームは静的なピクセルサイズを持つことはできません。ブラウザのウィンドウサイズに合わせてサイズを変更する必要がありますが、縦横比は維持してください。
私は、問題を示すために、完全なデモを設定します。
1920×1080の画面解像度を持つデバイスで<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
#game {
position: absolute;
}
html,body {
padding:0;
margin:0;
height:100%;
width:100%;
background-color: #000000;
}
</style>
</head>
<body>
<div id="game"></div>
<script src="https://raw.githubusercontent.com/pixijs/pixi.js/master/bin/pixi.min.js"></script>
<script>
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);
}
</script>
</body>
</html>
： デバイス上で
320x480の画面解像度： 
これはありませんブラウザのサイズを変更するだけです。