Chrome for Android上的devicePixelRatio影响WebGLRenderer.setSize函数

Question

我一直在测试对Three.js的移动支持，并且在setSize函数和多个视图方面发现了一个怪癖。这是场景。

在Chrome for Android（29.0.1547.59）中加载我的Nexus 7（Android OS 4.3）上的webgl_multiple_views示例时，整个渲染窗口未对齐，如此屏幕截图所示。

起初我怀疑与setViewport相关的问题，但在进一步检查后确定WebGLRenderer.js函数setSize试图通过乘以devicePixelRatio来纠正WebGL画布上下文大小，如下所示：

_canvas.width = width * this.devicePixelRatio;
_canvas.height = height * this.devicePixelRatio;

对我来说，这似乎是一种非常合理的方法，但问题在于，对于某些Android设备，系统已经隐含了看似的计算，导致了一个偏斜的场景。

我发现通过暗示 1 的默认像素比率，我可以纠正这个问题，但我预计它可能会破坏许多正常运行的移动设备。如果你愿意，这就是“修复”：

renderer = new THREE.WebGLRenderer( { antialias: true, alpha: false, devicePixelRatio: 1 } );

我的问题是，还有其他人遇到过这个吗？有没有人有一个更一致的修复，通常缩放画布上下文，所以它尊重设备像素比，但不会破坏一些Android设备？

感谢您的任何建议/协助。

Answer 1

试试这个功能。我已经对它进行了广泛的测试，它为我尝试过的每台设备报告了正确的设备宽度，高度和computedPixelRatio ...

function getDeviceDimensions()                  // get the width and height ofthe viewing device based on its OS
{
    screenWidth = window.screen.width;                                                  // get the width
    screenHeight = window.screen.height;                                                // get the height 
    var computedPixelRatio =  (window.screen.availWidth / document.documentElement.clientWidth);                        // a more reliable measure of device pixel ratio due to android firefox bugs...
    computedPixelRatio = window.devicePixelRatio >= computedPixelRatio ? window.devicePixelRatio : computedPixelRatio;  // select whichever value is larger between pixel ratio methods
    if (navigator.userAgent.indexOf('Android') != -1)                                   // if the client is on an android system
    {
        screenWidth = screenWidth / computedPixelRatio;                                 // divide the reported width by the pixel ratio
        screenHeight = screenHeight / computedPixelRatio;                               // divide the reported height by the pixel ratio
    }
    //alert(screenWidth + " " + screenHeight + " " + window.devicePixelRatio + " " + computedPixelRatio);
}