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

Question

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

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

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

是否有更好的方法来确定实际的客户规模？

Answer 1

至少在某些浏览器上，可以使用ResizeObserver和或devicePixelContentBox。

以下文章提供了更多信息：

https://web.dev/device-pixel-content-box/

Answer 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>

Answer 3

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

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

来源