screensizr-fix.md

Screensizr Height Bug

Here's the bug we're fixing:

As you can see, my viewport is definitely not 604px in height, but it's being reported that way by Screensizr. Why?

Here's the current Javascript:

function sizeIt() {
    var height = document.height;
    var width = document.width;
    
    $(".height").html(height);
    $(".width").html(width);
}

sizeIt();

$(window).resize(sizeIt);

document.height

The problem that we're running into is the fact that document.height will expand to fit the text, and it overflows through the bottom of our viewport. The way to fix this would be to use the window object instead of the document object, like so:

function sizeIt() {
    var height = $(window).height()
    var width = $(window).width()
    
    $(".height").html(height);
    $(".width").html(width);
}

sizeIt();

$(window).resize(sizeIt);

document.ready

While we're at it, it's good practice to wait until the document is completely finished loading before running our function. With jQuery we can just use the .ready() handler on our document. Here's the code after we've applied both of these patches:

function sizeIt() {
    var height = $(window).height()
    var width = $(window).width()
    
    $(".height").html(height);
    $(".width").html(width);
}

$(document).ready(function() {
    $(window).resize(sizeIt);
    sizeIt();
}

I also threw your window.resize event handler before your function, but that's just another best practice – it shouldn't have any real effect on this specific script. Awesome idea, let me know if you have any questions or anything.

Cheers!