busticated · January 4, 2016 19:25
diff --git a/viewport.html b/viewport.html
 <!doctype html>
 <html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="HandheldFriendly" content="True" />
        <meta name="MobileOptimized" content="320" />
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no" />
        <style>
            html,
            body {
                margin: 0;
                padding: 0;
            }

            body {
                padding: 0 1em;
            }

            h1,
            h3 {
                margin: 0;
            }

            h1 {
                margin: 0.25em 0;
                text-align: center;
            }

            h1 em {
                font-size: 0.5em;
                font-weight: normal;
            }

            p {
                margin: 0;
            }

            table {
                margin: 0 auto;
            }

            th,
            td {
                text-align: left;
            }
        </style>
    </head>
    <body>
        <h1>Viewport <em>[<span id="status">loading...</span>]</em></h1>
        <table>
            <thead>
                <tr>
                    <th colspan="2">
                        <h3>Current Dimensions</h3>
                    </th>
                </tr>
            </thead>
            <tbody id="dimensions"></tbody>
            <tfoot>
                <tr>
                    <td colspan="2">
                        <p>
                            <button id="btn-calc">Calculate Dimensions</button>
                            <button id="btn-nav">Navigate</button>
                        </p>
                    </td>
                </tr>
            </tfoot>
        </table>
        <script>
            (function(){
                var fields = ['availWidth', 'availHeight', 'availLeft', 'availTop', 'width', 'height', 'colorDepth', 'pixelDepth'],
                    dimensions = document.getElementById('dimensions'),
                    status = document.getElementById('status'),
                    navBtn = document.getElementById('btn-nav'),
                    calcBtn = document.getElementById('btn-calc');

                window.onload = function(){ status.innerHTML = 'loaded'; };
                navBtn.addEventListener('click', navigate, false);
                calcBtn.addEventListener('click', calculateDimensions, false);
                calculateDimensions();

                function navigate(event){
                    var url = window.prompt('url:');

                    if (url){
                        window.location = url;
                    }
                }

                function calculateDimensions(event){
                    var html = fields.map(function(field){
                        return buildRowHTML(field, window.screen[field]);
                    });
                    html.push(buildRowHTML('innerHeight', window.innerHeight));
                    html.push(buildRowHTML('innerWidth', window.innerWidth));
                    html.push(buildRowHTML('clientHeight', document.documentElement.clientHeight));
                    html.push(buildRowHTML('clientWidth', document.documentElement.clientWidth));
                    dimensions.innerHTML = html.join('');
                }

                function buildRowHTML(field, value){
                    return '<tr><td>' + field + ':</td><td>' + value + '</td></tr>';
                }
            }());
        </script>
    </body>
 </html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<meta name="HandheldFriendly" content="True" />
	<meta name="MobileOptimized" content="320" />
	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no" />
	<style>
	html,
	body {
	margin: 0;
	padding: 0;
	}

	body {
	padding: 0 1em;
	}

	h1,
	h3 {
	margin: 0;
	}

	h1 {
	margin: 0.25em 0;
	text-align: center;
	}

	h1 em {
	font-size: 0.5em;
	font-weight: normal;
	}

	p {
	margin: 0;
	}

	table {
	margin: 0 auto;
	}

	th,
	td {
	text-align: left;
	}
	</style>
	</head>
	<body>
	<h1>Viewport <em>[<span id="status">loading...</span>]</em></h1>
	<table>
	<thead>
	<tr>
	<th colspan="2">
	<h3>Current Dimensions</h3>
	</th>
	</tr>
	</thead>
	<tbody id="dimensions"></tbody>
	<tfoot>
	<tr>
	<td colspan="2">
	<p>
	<button id="btn-calc">Calculate Dimensions</button>
	<button id="btn-nav">Navigate</button>
	</p>
	</td>
	</tr>
	</tfoot>
	</table>
	<script>
	(function(){
	var fields = ['availWidth', 'availHeight', 'availLeft', 'availTop', 'width', 'height', 'colorDepth', 'pixelDepth'],
	dimensions = document.getElementById('dimensions'),
	status = document.getElementById('status'),
	navBtn = document.getElementById('btn-nav'),
	calcBtn = document.getElementById('btn-calc');

	window.onload = function(){ status.innerHTML = 'loaded'; };
	navBtn.addEventListener('click', navigate, false);
	calcBtn.addEventListener('click', calculateDimensions, false);
	calculateDimensions();

	function navigate(event){
	var url = window.prompt('url:');

	if (url){
	window.location = url;
	}
	}

	function calculateDimensions(event){
	var html = fields.map(function(field){
	return buildRowHTML(field, window.screen[field]);
	});
	html.push(buildRowHTML('innerHeight', window.innerHeight));
	html.push(buildRowHTML('innerWidth', window.innerWidth));
	html.push(buildRowHTML('clientHeight', document.documentElement.clientHeight));
	html.push(buildRowHTML('clientWidth', document.documentElement.clientWidth));
	dimensions.innerHTML = html.join('');
	}

	function buildRowHTML(field, value){
	return '<tr><td>' + field + ':</td><td>' + value + '</td></tr>';
	}
	}());
	</script>
	</body>
	</html>