如何強制 canvas 大小為 window 的實際大小（以像素為單位），而不考慮瀏覽器的縮放系數？

Question

我正在這個網站上工作： sphere.mars2540.com 。

javascript 或 css 中是否有任何方法可以強制 canvas 大小不按頁面縮放系數縮放並始終對應於屏幕的實際像素（甚至 4k）？

謝謝你

Answer 1

根據this answer不可能禁用頁面縮放，這沒關系。 您可以做的實際上更好的是調整 canvas 的大小以匹配當前頁面縮放（或者實際上使 canvas 始終保持相同的大小）。

這非常簡單，您只需在 canvas 調整大小計算中包含window.devicePixelRatio即可。

當沒有頁面縮放時， window.devicePixelRatio變量的值為1 ，並且每次縮放操作都會更改以匹配當前縮放百分比。

例如，要始終匹配 window 尺寸，您可以執行以下操作：

function resizeToWindow() {
    canvas.width = window.innerWidth * window.devicePixelRatio;
    canvas.height = window.innerHeight * window.devicePixelRatio;
}

要匹配父容器的大小，您可以執行以下操作：

function resizeToParent() {
    canvas.width = canvas.clientWidth * window.devicePixelRatio;
    canvas.height = canvas.clientHeight * window.devicePixelRatio;
}

使用這些或類似的 styles：

canvas {position: absolute; top: 0; left: 0; width: 100%; height: 100%}

檢測的最佳位置是需要調用上述函數，實際上調整大小是使用requestAnimationFrame並將當前 canvas 尺寸和devicePixelRatio值與上一幀的值進行比較（檢查每一幀，但如果有，請不要調整每一幀的大小沒必要）。

Answer 2

我設法在帶有 THREE.js 的 webgl animation 的上下文中找到了一個完整的答案：使用這個技巧，我檢測了設備的縮放比例：

function detectRatio() {
    var orientation=(screen.orientation || {}).type || screen.mozOrientation || screen.msOrientation;
    if ("userAgentData" in window.navigator && window.navigator.userAgentData.mobile && orientation==="landscape-primary" || orientation==="landscape-secondary") {
        return window.devicePixelRatio;
    } else if ("userAgentData" in window.navigator && !window.navigator.userAgentData.mobile && orientation==="landscape-primary" || orientation==="landscape-secondary") {
        return window.outerWidth/window.innerWidth;
    } else if (orientation==="portrait-secondary" || orientation==="portrait-primary") {
        return window.devicePixelRatio;
    } else {
        return Math.max(window.devicePixelRatio, window.outerWidth/window.innerWidth);
    }
}
var ratio1=detectRatio();

然后我使用這個技巧檢測到視網膜的變化：

var ratio2=window.devicePixelRatio/ratio1;

最后，我使用三個.js api 縮放 canvas 大小，例如：

renderer.setSize(width*ratio1*ratio2, height*ratio1*ratio2);

托多->多田。 它始終處於最大分辨率。