Android设备Chrome浏览器旋转屏幕并设置Canvas尺寸时innerWidth/innerHeight值异常问题及原因咨询

我在Android设备的Chrome浏览器里遇到了innerWidth和innerHeight值异常的问题，下面是复现这个问题的最简代码：

首先是HTML部分：

<canvas id="canvas"></canvas>

然后是JS逻辑：

window.onresize = function() {
    let ScreenWidth = window.innerWidth;
    let ScreenHeight = window.innerHeight;
  
    console.log("w: " + ScreenWidth);
    console.log("h: " + ScreenHeight);

    let canvas = document.getElementById('canvas');
    
    // 就是这两行代码引发了问题
    canvas.style.width = ScreenWidth + "px";
    canvas.style.height = ScreenHeight + "px";
};

// 手动触发resize事件让Canvas立即缩放
window.dispatchEvent(new Event('resize'));

这个逻辑很简单：获取视口的innerWidth和innerHeight，然后把Canvas的CSS宽高设为对应值，让它铺满整个页面。在PC上测试完全正常，但在Android手机上就出问题了：

1. 页面加载时手动触发的第一次resize事件，控制台输出的尺寸是360, 649，这符合预期；
2. 旋转手机到横屏，resize事件再次触发，输出705, 274，考虑到浏览器地址栏的存在，这个数值也算合理；
3. 但把手机旋转回竖屏后，输出的数值变成了705, 1271，而不是我预期的360, 649！

更奇怪的是，如果我注释掉设置Canvas宽高的那两行代码，旋转屏幕时innerWidth和innerHeight就能正常在360, 649和705, 274之间切换，完全没有异常。

我原本以为innerWidth和innerHeight应该反映的是当前视口的实际尺寸，而不是页面内容的尺寸？难道我理解错了这个API的定义？

补充：临时解决方法 #

后来我意外发现修改viewport的meta标签可以修复这个问题：

原来的meta标签：

<meta name="viewport" content="width=device-width, initial-scale=1">

修改后的meta标签：

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">

只是加了minimum-scale=1，旋转屏幕后innerWidth和innerHeight就会回到预期的初始值了。但我完全搞不懂为什么这个属性能解决问题，有没有大佬能帮忙解释一下背后的原理呀？

备注：内容来源于stack exchange，提问作者Tornseglare