javascript - Android 版 Chrome 上的 devicePixelRatio 影响 WebGLRenderer.setSize 函数

Question

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

加载webgl_multiple_views时以我的 Nexus 7 (Android OS 4.3) 上的 Chrome for Android (29.0.1547.59) 为例，整个渲染窗口未对齐，如该屏幕截图所示。

起初我怀疑与 setViewport 相关的问题，但经过进一步检查后确定 WebGLRenderer.js 函数 setSize 试图通过乘以devicePixelRatio 像这样:

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

对我来说，这似乎是一个完全合理的方法，但这里的问题是，对于某些 Android 设备，系统似乎已经暗示了计算，从而导致场景倾斜。

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

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

我的问题是，有其他人遇到过这种情况吗？有没有人有更一致的修复方法来普遍缩放 Canvas 上下文，使其尊重设备像素比，但不会破坏某些 Android 设备？

非常感谢您的任何建议/帮助。

Answer 1

试试这个功能。我已经对其进行了广泛的测试，它为我尝试过的每个设备报告了正确的设备宽度、高度和计算的像素比率...

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);
}