Return value of window.innerHeight seem to be wrong?

Question

I am trying to get a viewport height size with window.innerHeight. But its return value seems to be wrong.

I tried window.outerHeight and window.innerHeight.

I added the viewport meta tag too.

<meta name="viewport" content="height=device-height; width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no">

console.log("viewport_inner_height: " + window.innerHeight);
console.log("viewport_outer_height: " + window.outerHeight);

and the result is:

viewport_inner_height: 2044
viewport_outer_height: 1047

window.outerHeight seem right.

How can I get exactly the viewport height by javascript?

possible duplicate : https://stackoverflow.com/q/1248081/8620333 — Temani Afif, Feb 08 '19 at 08:02
probably this one too : https://stackoverflow.com/q/3437786/8620333 — Temani Afif, Feb 08 '19 at 08:03

score -1 · Answer 1 · answered Oct 24 '22 at 06:50

window.innerHeight is right.

I found the code that gets exactly the viewport height by JavaScript.

Try to run the code following. Good luck.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="height=device-height; width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no">
    <title>Document</title>
</head>
<script>

    console.log("viewport_inner_height: " + window.innerHeight);
    console.log("viewport_outer_height: " + window.outerHeight);

</script>
<body>
    <p class="dimensions">
        <span id="w"></span>
        &times;
        <span id="h"></span>
    </p>
</body>

<script>
    !function(t,n,e){"undefined"!=typeof module&&module.exports?module.exports=e():t.verge=e()}(this,0,function(){var t={},e="undefined"!=typeof window&&window,n="undefined"!=typeof document&&document,o=n&&n.documentElement,r=e.matchMedia||e.msMatchMedia,i=r?function(t){return!!r.call(e,t).matches}:function(){return!1},u=t.viewportW=function(){var t=o.clientWidth,n=e.innerWidth;return t<n?n:t},c=t.viewportH=function(){var t=o.clientHeight,n=e.innerHeight;return t<n?n:t};function f(){return{width:u(),height:c()}}function l(t,n){return!(!(t=t&&!t.nodeType?t[0]:t)||1!==t.nodeType)&&function(t,n){var e={};return n=+n||0,e.width=(e.right=t.right+n)-(e.left=t.left-n),e.height=(e.bottom=t.bottom+n)-(e.top=t.top-n),e}(t.getBoundingClientRect(),n)}return t.mq=i,t.matchMedia=r?function(){return r.apply(e,arguments)}:function(){return{}},t.viewport=f,t.scrollX=function(){return e.pageXOffset||o.scrollLeft},t.scrollY=function(){return e.pageYOffset||o.scrollTop},t.rectangle=l,t.aspect=function(t){var n=(t=null==t?f():1===t.nodeType?l(t):t).height,e=t.width;return n="function"==typeof n?n.call(t):n,(e="function"==typeof e?e.call(t):e)/n},t.inX=function(t,n){var e=l(t,n);return!!e&&0<=e.right&&e.left<=u()},t.inY=function(t,n){var e=l(t,n);return!!e&&0<=e.bottom&&e.top<=c()},t.inViewport=function(t,n){var e=l(t,n);return!!e&&0<=e.bottom&&0<=e.right&&e.top<=c()&&e.left<=u()},t});

    function updateViewport() {
        var newHeight = verge.viewportH();
        var newWidth = verge.viewportW();

        document.getElementById('w').innerHTML = newWidth;
        document.getElementById('h').innerHTML = newHeight;
    }

    // function updateScreenRes() {
    //     var newHeight = window.screen.height;
    //     var newWidth = window.screen.width;

    //     document.getElementById('screen_w').innerHTML = newWidth;
    //     document.getElementById('screen_h').innerHTML = newHeight;
    // }

    function doCalcs() {
        requestAnimationFrame(updateViewport);
        // requestAnimationFrame(updateScreenRes);
    }

    window.addEventListener('load', doCalcs, false);
</script>
</html>

Return value of window.innerHeight seem to be wrong?

1 Answers1