// viewport refers to portion of your browser that is actually used for displaying your web page // viewport doesnt include space taken by scrollbars var op = $("#op"); window.addEventListener("resize", displayViewportSize, false); displayViewportSize(null); function displayViewportSize(e) { op.text(""); op.append("width : " + document.documentElement.clientWidth + "<br/>"); op.append("height : " + document.documentElement.clientHeight + "<br/><br/>"); //excluding scrollbars op.append("inner width : " + window.innerWidth + "<br/>"); op.append("inner height : " + window.innerHeight + "<br/><br/>"); // including titlebar op.append("outer width : " + window.outerWidth + "<br/>"); op.append("outer height : " + window.outerHeight + "<br/><br/>"); // screen size (Including taskbar) op.append("screen width : " + window.screen.width + "<br/>"); op.append("screen height : " + window.screen.height+ "<br/><br/>"); // available screen size (Excluding taskbar) op.append("available screen width : " + window.screen.availWidth + "<br/>"); op.append("available screen height : " + window.screen.availHeight + "<br/><br/>"); // document size op.append("document width : " + document.body.clientWidth + "<br/>"); op.append("document height : " + document.body.clientHeight + "<br/><br/>"); }
<div id="op"></div>
body{ border: red 1px solid; }