(moved to plnkr)

by ScottRippey

HTML

<h3> Your screen info: </h3>

<pre class="output">
</pre>

<label><input type="checkbox" checked="" class="toggle-viewport" /> Toggle <code>&lt;meta name="viewport" content="width=device-width" /&gt;</code>

<h3> Media Query Breakpoints: </h3>

<div> <span class="width-100-199"> width: 100px - 199px </span> <span class="device-width-100-199"> device-width: 100px - 199px </span> </div>
<div> <span class="width-200-299"> width: 200px - 299px </span> <span class="device-width-200-299"> device-width: 200px - 299px </span> </div>
<div> <span class="width-300-399"> width: 300px - 399px </span> <span class="device-width-300-399"> device-width: 300px - 399px </span> </div>
<div> <span class="width-400-499"> width: 400px - 499px </span> <span class="device-width-400-499"> device-width: 400px - 499px </span> </div>
<div> <span class="width-500-599"> width: 500px - 599px </span> <span class="device-width-500-599"> device-width: 500px - 599px </span> </div>
<div> <span class="width-600-699"> width: 600px - 699px </span> <span class="device-width-600-699"> device-width: 600px - 699px </span> </div>
<div> <span class="width-700-799"> width: 700px - 799px </span> <span class="device-width-700-799"> device-width: 700px - 799px </span> </div>
<div> <span class="width-800-899"> width: 800px - 899px </span> <span class="device-width-800-899"> device-width: 800px - 899px </span> </div>
<div> <span class="width-900-999"> width: 900px - 999px </span> <span class="device-width-900-999"> device-width: 900px - 999px </span> </div>
<div> <span class="width-1000-1099"> width: 1000px - 1099px </span> <span class="device-width-1000-1099"> device-width: 1000px - 1099px </span> </div>
<div> <span class="width-1100-1199"> width: 1100px - 1199px </span> <span class="device-width-1100-1199"> device-width: 1100px - 1199px </span> </div>
<div> <span class="width-1200-1299"> width: 1200px - 1299px </span> <span class="device-width-1200-1299"> device-width: 1200px - 1299px </span> </div>

CSS

body {
    background-image: url(http://grid.utils.net/ex.png/?mg=10,10&s=100);
}

pre {
    font-size: 120%;
}

span {
	color: hsl(0, 0%, 80%);
}

@media (min-width: 100px) and (max-width: 199px) {
	.width-100-199 { color: green; }
}
@media (min-width: 200px) and (max-width: 299px) {
	.width-200-299 { color: green; }
}
@media (min-width: 300px) and (max-width: 399px) {
	.width-300-399 { color: green; }
}
@media (min-width: 400px) and (max-width: 499px) {
	.width-400-499 { color: green; }
}
@media (min-width: 500px) and (max-width: 599px) {
	.width-500-599 { color: green; }
}
@media (min-width: 600px) and (max-width: 699px) {
	.width-600-699 { color: green; }
}
@media (min-width: 700px) and (max-width: 799px) {
	.width-700-799 { color: green; }
}
@media (min-width: 800px) and (max-width: 899px) {
	.width-800-899 { color: green; }
}
@media (min-width: 900px) and (max-width: 999px) {
	.width-900-999 { color: green; }
}
@media (min-width: 1000px) and (max-width: 1099px) {
	.width-1000-1099 { color: green; }
}

@media (min-device-width: 100px) and (max-device-width: 199px) {
	.device-width-100-199 { color: green; }
}
@media (min-device-width: 200px) and (max-device-width: 299px) {
	.device-width-200-299 { color: green; }
}
@media (min-device-width: 300px) and (max-device-width: 399px) {
	.device-width-300-399 { color: green; }
}
@media (min-device-width: 400px) and (max-device-width: 499px) {
	.device-width-400-499 { color: green; }
}
@media (min-device-width: 500px) and (max-device-width: 599px) {
	.device-width-500-599 { color: green; }
}
@media (min-device-width: 600px) and (max-device-width: 699px) {
	.device-width-600-699 { color: green; }
}
@media (min-device-width: 700px) and (max-device-width: 799px) {
	.device-width-700-799 { color: green; }
}
@media (min-device-width: 800px) and (max-device-width: 899px) {
	.device-width-800-899 { color: green; }
}
@media (min-device-width: 900px) and (max-device-width: 999px) {
	.device-width-900-999 { color: green;...

JavaScript

setInterval(updateOutput, 250);
updateOutput();

function updateOutput() {
    var results = {};
    
    results["documentElement.offsetWidth"] = document.documentElement.offsetWidth;
    results["window.innerWidth"] = window.innerWidth;
    results["window.outerWidth"] = window.outerWidth;
    results["screen.width"] = screen.width;




    
    var output = "";
    for (var title in results) {
        output += title + " = " + results[title];
        output += "\n";
    }
    document.querySelector(".output").innerText = output;
}

setupToggleViewport();
function setupToggleViewport() {
    var metaViewport = createMetaViewport();

    var toggleMetaViewport = document.querySelector('.toggle-viewport');
    toggleMetaViewport.addEventListener('click', checkMetaViewport);
    checkMetaViewport();

    function checkMetaViewport() {
        if (toggleMetaViewport.checked) {
            document.head.appendChild(metaViewport);
        } else {
            document.head.removeChild(metaViewport);
        }
    }
    function createMetaViewport() {
        var meta = document.createElement('meta');
        meta.setAttribute("name", "viewport");
        meta.setAttribute("content", "width=device-width");
        return meta;
    }
}