Browser Width/Height

by Andy Blueman

HTML

<body>
    <div id="browserInfo"></div>
    <div id="browserInfo2"></div>
</body>

CSS

html {
    display:inline-block;
    box-sizing: border-box;
    margin:0px;
    padding:0px;
}
body {
    margin:10px;
    border:1px solid red;
}
*, *:before, *:after {
    box-sizing: inherit;
}
#browserInfo, #browserInfo2 {
    display:inline-block;
    padding:8px;
    border:1px solid blue;
    width:300px;
}

JavaScript

//Browser (Window)
$('#browserInfo').text('Window (Width: ' + $(window).width() + ', Height: ' + $(window).height() + ')');
$(window).resize(function () {
    $('#browserInfo').text('Window (Width: ' + $(window).width() + ', Height: ' + $(window).height() + ')');
});

//Browser (Document)
$('#browserInfo2').text('Document (Width: ' + $(document).width() + ', Height: ' + $(document).height() + ')');
$(window).resize(function () {
    $('#browserInfo2').text('Document (Width: ' + $(document).width() + ', Height: ' + $(document).height() + ')');
});