1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
|
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0" />
<title>Test: Responsive with ViewPort Tag</title>
</head>
<body>
<h2>Viewport Detections</h2>
<h5><meta name="viewport" content="initial-scale=1.0" /></h5>
<h3><a href="viewport.html">Without 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/agt1YS1wcm9maWxlcnIRCxIEVGVzdBiAgICAiYLaCAw?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 = 'agt1YS1wcm9maWxlcnIRCxIEVGVzdBiAgICAiYLaCAw';
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>
|
