viewport

by cent cent

HTML

<FORM>
   <FIELDSET>
      <LEGEND><b>Viewport</b></LEGEND>
      <input id="dimensions" type="button" value="Get Dimensions!" />
   </FIELDSET>
<script>
function viewPort() {
    var h = window.innerHeight ||   document.documentElement.clientHeight || document.getElementsByTagName('body')[0].clientHeight;

    var w = window.innerWidth || document.documentElement.clientWidth || document.getElementsByTagName('body')[0].clientWidth;
    return { width : w , height : h }
}

function addEventSimple(obj,evt,fn) {
	if (obj.addEventListener)
		obj.addEventListener(evt,fn,false);
	else if (obj.attachEvent)
		obj.attachEvent('on'+evt,fn);
}

function removeEventSimple(obj,evt,fn) {
	if (obj.removeEventListener)
		obj.removeEventListener(evt,fn,false);
	else if (obj.detachEvent)
		obj.detachEvent('on'+evt,fn);
}
var s=document.getElementById('dimensions');
function show(){
    alert('w: ' + viewPort().width + ' h: ' + viewPort().height + '\nwindow.innerWidth=' + window.innerWidth + '\nwindow.innerHeight=' + window.innerHeight + '\ndocument.documentElement.clientWidth=' + document.documentElement.clientWidth + '\ndocument.documentElement.clientHeight=' + document.documentElement.clientHeight + '\ndocument.getElementsByTagName(\'body\')[0].clientWidth=' + document.getElementsByTagName('body')[0].clientWidth + document.documentElement.clientHeight + '\ndocument.getElementsByTagName(\'body\')[0].clientHeight=' + document.getElementsByTagName('body')[0].clientHeight);
}
addEventSimple(s, 'click', show);
</script>