对于全屏画布，如何确定浏览器客户端大小？答案

【问题标题】：For a full-screen canvas, how do I determine browser client size?对于全屏画布，如何确定浏览器客户端大小？
【发布时间】：2019-02-16 11:49:30
【问题描述】：

我尝试了多种方法来确定浏览器客户区的物理像素大小，但在移动设备上得到的结果不是整数。

例如：window.outerWidth * window.devicePixelRatio 在带有 Chrome 的 Pixel 2 上会产生 1081.5，即使我知道浏览器的客户区实际上是 1080 像素宽。

另一种查看方式是将mydevice.io 和JS screen.width 与JS pixel-ratio 相乘。

有没有更好的方法来确定客户端的物理大小？

【问题讨论】：

检查：stackoverflow.com/questions/21680629/…
不错的发现！该问题的主要答案是“不要那样做”，但我想在 WebGL 中绘制像素完美的文本，并且我想在我的画布元素中设置正确的帧缓冲区大小。

标签： html5-canvas webgl

【解决方案1】：

ResizeObserver 和或devicePixelContentBox 可用于此目的，至少在某些浏览器上是这样。

【讨论】：

这里有几个线程供参考：khronos.org/webgl/public-mailing-list/public_webgl/1406/…, github.com/KhronosGroup/WebGL/issues/2460
很酷，有人正在解决这个问题，但更准确的devicePixelRatio 不足以作为解决方案吗？
听起来更高分辨率的 devicePixelRatio 不会有帮助。看起来每个布局引擎都会做不同的事情来确定究竟有多少像素来制作某些东西，无论他们使用的是 floor 还是 ceil 还是 round ，以及他们何时以什么顺序使用它们以及其他选项（边框、填充、边距等......）所以没有简单的答案。

【解决方案2】：

<button onclick="myFunction()">Try it</button>

    <p><strong>Note:</strong> The innerWidth and innerHeight properties are not supported in IE8 and earlier.</p>

    <p id="demo"></p>

    <script>
    function myFunction() {
        var w = window.innerWidth;
        var h = window.innerHeight;
        document.getElementById("demo").innerHTML = "Width: " + w + "<br>Height: " + h;
    }
    </script>

【讨论】：

这会返回以 CSS 像素为单位的宽度。我的问题是关于物理像素的。

【解决方案3】：

如果要排除客户端任务栏，可以使用window.screen.availHeight 和window.screen.availWidth。

否则，请使用 window.screen.height 和 window.screen.width。

Source

【讨论】：

window.screen.width 和 window.screen.availWidth 都返回 CSS 像素。我的问题是关于物理像素的。
我的错，我不明白这一点，我什至不知道其中的区别。祝你好运