Track Viewport and Page Dimensions

by kaikemono

HTML

<div class="canvas">
    Width: <span id="width"></span></br>
    Height: <span id="height"></span></br></br>
    Body Height: <span id="body"></span>
</div>

CSS

.canvas {
    height: 200px;
    padding: 20px;
    background-color: #f2f4f7;
}

JavaScript

$(document).ready(function() {
    
    var pageWidth = $(document).width();
    var pageHeight = $(document).height();
    
    var viewportWidth = $(window).width();
    var viewportHeight = $(window).height();
    
    $('#width').html(screen.width);
    $('#height').html(screen.height);
    $('#body').html($('.canvas').height());
    
    $(window).resize(function() {
    
        $('#width').html($(document).width());
        $('#height').html($(document).height());

    });
    
});