FOSDEM-2025-keynote/lib/js/extra/headjs/test/viewport.html

139 lines
5.5 KiB
HTML
Raw Permalink Normal View History

<!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>