javascript - viewport

javascript viewport, screen sizes, resolution, document sizes

HTML

<div id="werbung"></div>
<div id="op"></div>

CSS

body{
    border: red 1px solid;
}

JavaScript

// 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");
var werbung = $("#werbung");

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/>");
    
    // is mobile
    if (document.body.clientWidth < 400) {
    	werbung.appendchild("Die Werbung kommt....");
    }

}