Question

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

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

查看此问题的另一种方法是转到mydevice.io，然后将JS screen.width与JS pixel-ratio相乘。

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

Answer 1

目前无法执行此操作，但是建议的ResizeObserver API将来可能会启用此功能。

https://github.com/WICG/ResizeObserver/issues/61

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

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

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

Source

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

3 个答案: