139 lines
5.5 KiB
HTML
139 lines
5.5 KiB
HTML
|
<!doctype html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8"/>
|
||
|
|
<title>Test: Responsive without ViewPort Tag</title>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h2>Viewport Detections</h2>
|
||
|
|
<h3><a href="viewport-meta.html">With ViewPort Tag</a></h3>
|
||
|
|
|
||
|
|
<div id="result"></div>
|
||
|
|
|
||
|
|
<ul>
|
||
|
|
<li>1) Prefered: Inner browser surface/viewport. Excludes toolbars & scrollbars.</li>
|
||
|
|
<li>2) Fallback: Like 1, but not supported everywhere.</li>
|
||
|
|
<li>3) Experimental: Just testing accuracy here.</li>
|
||
|
|
<li>4) Prefered: Current browser size. Also takes into account a resized browser window.</li>
|
||
|
|
<li>5) Fallback: Measures the entire screen resolution.</li>
|
||
|
|
<li><a href="http://www.browserscope.org/user/tests/table/agt1YS1wcm9maWxlcnIRCxIEVGVzdBiAgICA-dvoCQw?v=3&layout=simple" target="results">BrowserScope Results</a></li>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
// Throttle navigators from triggering too many resize events
|
||
|
|
var resizeId = 0;
|
||
|
|
function onResize() {
|
||
|
|
clearTimeout(resizeId);
|
||
|
|
resizeId = setTimeout(resize, 50);
|
||
|
|
}
|
||
|
|
|
||
|
|
function addResult(title, value) {
|
||
|
|
var ele = document.createElement("div");
|
||
|
|
|
||
|
|
if (value !== false) {
|
||
|
|
ele.innerHTML = title + ": " + value;
|
||
|
|
|
||
|
|
if (value === "false") {
|
||
|
|
value = 0;
|
||
|
|
}
|
||
|
|
else if (value === "true") {
|
||
|
|
value = 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
browserScopeAdd(title, value);
|
||
|
|
} else {
|
||
|
|
ele.innerHTML = title;
|
||
|
|
}
|
||
|
|
|
||
|
|
return ele;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Log results to BrowserScope
|
||
|
|
function browserScopeClear() {
|
||
|
|
window._bTestResults = {};
|
||
|
|
}
|
||
|
|
|
||
|
|
function browserScopeAdd(title, value) {
|
||
|
|
window._bTestResults = window._bTestResults || {};
|
||
|
|
window._bTestResults[title] = value;
|
||
|
|
}
|
||
|
|
|
||
|
|
function browserScopeLog() {
|
||
|
|
var result = document.getElementById("browserscope");
|
||
|
|
if (result) {
|
||
|
|
result.parentNode.removeChild(result);
|
||
|
|
}
|
||
|
|
|
||
|
|
var apiKey = 'agt1YS1wcm9maWxlcnIRCxIEVGVzdBiAgICA-dvoCQw';
|
||
|
|
var script = document.createElement('script');
|
||
|
|
|
||
|
|
script.id = "browserscope";
|
||
|
|
script.src = 'http://www.browserscope.org/user/beacon/' + apiKey;
|
||
|
|
|
||
|
|
// use insertBefore to keep IE from throwing Operation Aborted (thx Bryan Forbes!)
|
||
|
|
var head = document.head || document.getElementsByTagName('head')[0];
|
||
|
|
// but insert at end of head, because otherwise if it is a stylesheet, it will not override values
|
||
|
|
head.insertBefore(script, head.lastChild);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Detect
|
||
|
|
function resize() {
|
||
|
|
browserScopeClear();
|
||
|
|
|
||
|
|
var result = document.getElementById("result");
|
||
|
|
var parent = result.parentNode;
|
||
|
|
parent.removeChild(result);
|
||
|
|
|
||
|
|
var newResult = document.createElement("div");
|
||
|
|
newResult.id = "result";
|
||
|
|
|
||
|
|
newResult.appendChild(addResult("1) INNER measurements", false));
|
||
|
|
|
||
|
|
newResult.appendChild(addResult("innerWidth" , window.innerWidth));
|
||
|
|
newResult.appendChild(addResult("innerHeight", window.innerHeight));
|
||
|
|
newResult.appendChild(addResult("landscape (iwh)", (window.innerWidth > window.innerHeight).toString()));
|
||
|
|
|
||
|
|
newResult.appendChild(addResult("<br/>", false));
|
||
|
|
newResult.appendChild(addResult("2) INNER measurements", false));
|
||
|
|
|
||
|
|
newResult.appendChild(addResult("clientWidth" , document.documentElement.clientWidth));
|
||
|
|
newResult.appendChild(addResult("clientHeight", document.documentElement.clientHeight));
|
||
|
|
newResult.appendChild(addResult("landscape (cwh)", (document.documentElement.clientWidth > document.documentElement.clientHeight).toString()));
|
||
|
|
|
||
|
|
newResult.appendChild(addResult("<br/>", false));
|
||
|
|
newResult.appendChild(addResult("3) INNER measurements", false));
|
||
|
|
|
||
|
|
newResult.appendChild(addResult("availWidth", window.screen.availWidth));
|
||
|
|
newResult.appendChild(addResult("availHeight", window.screen.availHeight));
|
||
|
|
newResult.appendChild(addResult("landscape (awh)", (window.screen.availWidth > window.screen.availHeight).toString()));
|
||
|
|
|
||
|
|
newResult.appendChild(addResult("<br/>", false));
|
||
|
|
newResult.appendChild(addResult("4) OUTER measurements", false));
|
||
|
|
|
||
|
|
newResult.appendChild(addResult("outerWidth" , window.outerWidth));
|
||
|
|
newResult.appendChild(addResult("outerHeight", window.outerHeight));
|
||
|
|
newResult.appendChild(addResult("landscape (owh)", (window.outerWidth > window.outerHeight).toString()));
|
||
|
|
|
||
|
|
newResult.appendChild(addResult("<br/>", false));
|
||
|
|
newResult.appendChild(addResult("5) OUTER measurements", false));
|
||
|
|
|
||
|
|
newResult.appendChild(addResult("screen.width" , window.screen.width));
|
||
|
|
newResult.appendChild(addResult("screen.height", window.screen.height));
|
||
|
|
newResult.appendChild(addResult("landscape (swh)", (window.screen.width > window.screen.height).toString()));
|
||
|
|
|
||
|
|
parent.appendChild(newResult);
|
||
|
|
browserScopeLog();
|
||
|
|
}
|
||
|
|
|
||
|
|
resize();
|
||
|
|
|
||
|
|
// Manually attach, as to not overwrite existing handler
|
||
|
|
if (window.addEventListener) {
|
||
|
|
window.addEventListener("resize", onResize, false);
|
||
|
|
|
||
|
|
} else {
|
||
|
|
window.attachEvent("onresize", onResize);
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|