CODEWITHSUNDEEP
javascriptviewport
Karoly Horvath
Karoly Horvath

Reputation: 96258

javascript - incorrect viewport size

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.

Upvotes: 0

Views: 594

Answers (1)

gion_13
gion_13

Reputation: 41533

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.

Upvotes: 1

Related Questions