javascript - incorrect viewport size

Question

I'm try to get the browser viewport size.

When the page initially loads (in jQuery(function() { .. });) , both these show the correct value (eg: 560):

console.log($(window).height());
console.log(document.documentElement.clientHeight);

But later when I do the same thing, it shows the height of the whole docoument (eg: 11675).

There's a lot of HTML and JS and it would take a while to figure out what's going on, I was just wondering, did anyone see anything like this, if so, what can cause it and how can I get the correct size of the viewport? All google hits show that's the correct way to retrieve the value.

Note: I'm using chrome.

Have you looked at http://borbit.github.io/jquery.viewport/? — haim770, Jun 03 '13 at 10:25
Quote: "But later when I do the same thing, **it** shows the height of the whole docoument (eg: 11675)." Explain which expression is the `it` you mentioned. The second statement 'should' return the entire document height by [definition](https://developer.mozilla.org/en-US/docs/Web/API/element.clientHeight) while the first one should give you the correct viewport. — Mutahhir, Jun 03 '13 at 11:01

score 1 · Accepted Answer · edited May 23 '17 at 11:49

I recently bumped into the same problem in one of my projects. I didn't have time to dig and isolate this weird bug, and I ended up using this function (adapted from this answer) to correctly get the viewport dimensions :

var getViewportSize = (function(){
        var w = window,
            d = document,
            e = d.documentElement,
            g = d.getElementsByTagName('body')[0];

        return function(){
            return {
                w : Math.max(w.innerWidth || e.clientWidth || g.clientWidth, app.config.minWidth),
                h : Math.max(w.innerHeight|| e.clientHeight|| g.clientHeight, app.config.minHeight)
            };
        }
    })();

From what I've tested, jQuery returned the incorrect size when the console or some other browser extension/toolbar was occupying some of the viewport space.
Hope this helps, but I'm also curious and trying to figure this one out, because it's hard to think that a mature lib such as jQuery 2.0 has these kind of bugs.

javascript - incorrect viewport size

1 Answers1