webgl canvas不尊重样式维度

Question

我正在尝试更改画布的大小，同时保持其显示的大小不变。这适用于桌面游猎，而不是移动游猎......

var screenWidth = window.innerWidth,
  screenHeight = window.innerHeight,
  extraRatio = 0.4;

var devicePixelRatio = window.devicePixelRatio || 1,
 backingStoreRatio = gl.webkitBackingStorePixelRatio || 1,
 ratio = devicePixelRatio / backingStoreRatio * extraRatio;

gl.canvas.width = screenWidth * ratio;
gl.canvas.height = screenHeight * ratio;
gl.canvas.style.width = screenWidth + 'px';
gl.canvas.style.height = screenHeight + 'px';

我正在使用extraRatio来控制渲染画布的计算量（我渲染360视频会非常激烈）所以我希望画布始终是全屏，并控制与extraRatio

的像素化

这适用于桌面Safari，但不适用于移动设备。在桌面设备中，无论什么是extraRatio，画布都将全屏显示。在移动设备中，画布从左上角绘制并填充屏幕的2*extraRatio（如果extraRatio > 0.5，它会离开屏幕，否则屏幕的其余部分为黑色）

在桌面设备devicePixelRatio = backingStoreRatio = 1和移动设备devicePixelRatio = backingStoreRatio = 2中，不确定这是如何发挥作用的，但似乎在某个地方。