Как определить размер клиента браузера для полноэкранного холста?

Question

Я пробовал различные способы определения размера клиентской области браузера с точки зрения физических пикселей, но на мобильных устройствах я получаю нецелочисленный результат.

Например: window.outerWidth * window.devicePixelRatio наPixel 2 с Chrome дает 1081.5, хотя я знаю, что клиентская область браузера имеет ширину 1080 пикселей.

Другой способ увидеть это - mydevice.io и умножениеJS screen.width с JS pixel-ratio.

Есть ли лучший способ определить размер физического клиента?

Answer 1

Если вы хотите исключить клиентские панели задач, вы можете использовать window.screen.availHeight и window.screen.availWidth.

Иначе, используйте window.screen.height и window.screen.width.

Source

Answer 2

Нет способа сделать это прямо сейчас, но предложенный ResizeObserver API, вероятно, включит это в будущем.

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

Answer 3

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