PIXI.js文本在浏览器缩放75%时模糊的问题求助

已配置以下PIXI.js参数：

• roundPixels: true
• antialias: false
• resolution: devicePixelRatio
• autoDensity: true

在浏览器缩放比例≥80%时文本显示清晰，但缩放至75%时文本模糊，显示器分辨率为1920x1080，问题可能与屏幕尺寸相关。

对比div与PIXI.js文本的代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pixi.js Comparison</title>
    <!-- Include Pixi.js library -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/7.3.2/pixi.min.js"></script>
    <style>
        body {
            margin: 0;
            background-color: black;
            color: white;
            font-family: Arial, sans-serif;
        }
        #pixi-container {
            position: absolute;
        }
        #div-container {
            position: absolute;
            top: 0;
            left: 300px;
          font-weight:500;
            color: white;
            font-family: Arial, sans-serif;
          font-size: 16px;
          padding-top: 40px;
        }
      canvas {
    image-rendering: pixelated;
}
    </style>
</head> 
<body>

<!-- Pixi.js Container -->
<div id="pixi-container"></div>

<!-- Div Container -->
<div id="div-container">
    <div id="div-text">Hello from div!</div>
</div>

<script>
    // Initialize Pixi.js app
   const devicePixelRatio = window.devicePixelRatio || 1;
const scaleFactor = 1.0; // Adjust this value as needed

const app = new PIXI.Application({
    width: window.innerWidth * scaleFactor,
    height: window.innerHeight * scaleFactor,
    resolution: devicePixelRatio,
    autoDensity: true,
    backgroundColor: 0x000000, // Black background
    antialias: false, // Disable antialiasing
    roundPixels: true, // Round pixel positions
});

// Set the scale of the PIXI.Application to compensate for the adjusted size
app.view.style.transform = `scale(${1 / scaleFactor})`;
   
 

    // Add Pixi.js text 
    const pixiText = new PIXI.Text('Hello from Pixi!', { 
        fill: 'white',
        fontSize: 16, 
        fontFamily: 'Arial, sans-serif',
      roundPixels: true, 
      fontWeight: 500,
    }); 
    pixiText.position.set(50, 50);
  //pixiText.resolution = devicePixelRatio;

    app.stage.addChild(pixiText);

    // Append Pixi.js canvas to the HTML body
    document.getElementById('pixi-container').appendChild(app.view);
    
    // Add text using a div
    const divText = document.createElement('div');
    divText.innerText = 'Hel lo from div!';
    document.getElementById('div-container').appendChild(divText);
</script>

</body>
</html>

注意：更改浏览器缩放比例后需刷新结果，因为更改窗口缩放后画布不会自动更新。

内容的提问来源于stack exchange，提问作者guman