旧Android设备上WebGL Canvas无法正常缩放的问题求助

问题现象 #

• 在Android 13的Chrome浏览器中，WebGL Canvas可正常缩放适配容器
• 在Android 7（红米4X）设备上，Canvas仅能绘制默认的300x150尺寸，无法随容器调整大小

正常显示效果：

异常显示效果：

当前使用的视口调整代码：

window.onresize = () => {
    const dpr = window.devicePixelRatio;
    gl.canvas.width = Math.round(gl.canvas.clientWidth * dpr);
    gl.canvas.height = Math.round(gl.canvas.clientHeight * dpr);
    gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
    draw();
};

解决办法 #

1. 给Canvas设置明确的CSS尺寸 #

旧Android浏览器对未显式定义尺寸的Canvas支持不佳，需添加基础样式确保容器尺寸能被正确识别：

canvas {
    width: 100%;
    height: 100%;
    display: block;
    box-sizing: border-box;
}

同时确保Canvas的父容器也设置了有效尺寸（比如占满整个视口），避免clientWidth/clientHeight返回默认值或0。

2. 初始化时主动触发resize逻辑 #

部分旧设备不会在页面加载完成后自动触发resize事件，需要在WebGL初始化完成后手动执行一次尺寸调整：

function handleResize() {
    // 兼容旧设备devicePixelRatio获取异常的情况
    const dpr = Math.max(1, window.devicePixelRatio || 1);
    const canvas = gl.canvas;
    const targetWidth = Math.round(canvas.clientWidth * dpr);
    const targetHeight = Math.round(canvas.clientHeight * dpr);
    
    // 仅在尺寸变化时执行调整，避免不必要的重绘
    if (canvas.width !== targetWidth || canvas.height !== targetHeight) {
        canvas.width = targetWidth;
        canvas.height = targetHeight;
        gl.viewport(0, 0, targetWidth, targetHeight);
        draw();
    }
}

// 绑定resize事件
window.addEventListener('resize', handleResize);
// 初始化阶段主动执行一次
handleResize();

3. 替换箭头函数为普通函数 #

旧Android浏览器对ES6箭头函数的支持不完善，改用普通函数绑定事件：

window.onresize = function() {
    const dpr = Math.max(1, window.devicePixelRatio || 1);
    gl.canvas.width = Math.round(gl.canvas.clientWidth * dpr);
    gl.canvas.height = Math.round(gl.canvas.clientHeight * dpr);
    gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
    draw();
};

4. 用节流优化resize性能 #

旧设备性能有限，通过setTimeout和requestAnimationFrame节流，避免频繁触发重绘：

let resizeTimer;
function handleResize() {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(() => {
        requestAnimationFrame(() => {
            const dpr = Math.max(1, window.devicePixelRatio || 1);
            const canvas = gl.canvas;
            const targetWidth = Math.round(canvas.clientWidth * dpr);
            const targetHeight = Math.round(canvas.clientHeight * dpr);
            
            if (canvas.width !== targetWidth || canvas.height !== targetHeight) {
                canvas.width = targetWidth;
                canvas.height = targetHeight;
                gl.viewport(0, 0, targetWidth, targetHeight);
                draw();
            }
        });
    }, 100);
}

window.addEventListener('resize', handleResize);
handleResize();

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