RobG wrote:
[snip]
http://www.quirksmode.org/viewport/compatibility.html
At the bottom of the page is a good start on a browser compatability
test for viewport characteristics. It would be nice to extend it cover
mor functions and provide a better layout... spare time project?
[snip]
What the heck. Below is a modified version of the page.
Interesting is that values for scrollTop, scrollLeft, etc.
are undefined until you actually scroll down or across, so
the "supported y/n" column is not exactly correct. Any
improvements would be greatly appreciated.
Watch for wrapping, I've tried to manually wrap it but I'm
no expert.
Cheers, Rob.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Viewport Tester</title>
<meta name="author" content="Various">
<meta name="keywords" content="">
<meta name="description" content="
This page was orignally from:
http://www.quirksmode.org/viewport/compatibility.html
and has been modified for a table layout that can be
copied and pasted from different browsers to more easily
compile a browser compatability matrix.
It also report user agent (UA) and platform, however
these are not reliable because some UA's allow the user
to sepcify what will reported, regardless of the actual UA
or platform.">
<style type="text/css">
td,th
{font-size: 14px; padding-right: 5; padding-left: 10;
border-bottom: 1px solid #999999;}
..pass
{font-size: 14px; background-color: green;
font-weight: bold; text-align: center; color: gold;}
..fail
{font-size: 14px; background-color: red;
font-weight: bold; text-align: center; color: darkblue;}
..count
{font-size: 14px; text-align: right; font-weight: bold;
padding-right: 10; padding-left: 10;}
p
{font-family: sans-serif; size: 14px;}
</style>
<script type="text/javascript">
var x = navigator;
var props = new Array(
'self.pageXOffset',
'self.pageYOffset',
'self.screenX',
'self.screenY',
'self.innerHeight',
'self.innerWidth',
'self.outerHeight',
'self.outerWidth',
'self.screen.height',
'self.screen.width',
'self.screen.availHeight',
'self.screen.availWidth',
'self.screen.availTop',
'self.screen.availLeft',
'self.screen.Top',
'self.screen.Left',
'self.screenTop',
'self.screenLeft',
'self.screen.colorDepth',
'self.screen.pixelDepth',
'document.body.clientHeight',
'document.body.clientWidth',
'document.body.scrollHeight',
'document.body.scrollWidth',
'document.body.scrollLeft',
'document.body.scrollTop',
'document.body.offsetHeight',
'document.body.offsetWidth',
'document.body.offsetTop',
'document.body.offsetLeft'
);
function uaDetail() {
var p = '<table border=\"0"\>'
+ '<tr><th style=\"text-align: left;\">Property</th>'
+ '<th style=\"text-align: left;\">Value</th</tr>';
if (navigator) {
var x = navigator;
p += '<tr><td>CodeName</td><td>' + x.appCodeName +
' </td></tr>'
p += '<tr><td>MinorVersion</td><td>' + x.appMinorVersion
+ ' </td></tr>'
p +='<tr><td>Name</td><td>' + x.appName + ' </td></tr>'
p +='<tr><td>Version</td><td>' + x.appVersion +
' </td></tr>'
p +='<tr><td>CookieEnabled</td><td>' + x.cookieEnabled +
' </td></tr>'
p +='<tr><td>CPUClass</td><td>' + x.cpuClass +
' </td></tr>'
p +='<tr><td>OnLine</td><td>' + x.onLine + ' </td></tr>'
p +='<tr><td>Platform</td><td>' + x.platform +
' </td></tr>'
p +='<tr><td>UA</td><td>' + x.userAgent + ' </td></tr>'
p +='<tr><td>BrowserLanguage</td><td>' +
x.browserLanguage + ' </td></tr>'
p +='<tr><td>SystemLanguage</td><td>' + x.systemLanguage
+ ' </td></tr>'
p +='<tr><td>UserLanguage</td><td>' + x.userLanguage +
' </td></tr>'
p +='</table>'
} else {
p = 'Your user agent does not support the navigator object,'
+ '\nso I can\'t determine your viewport properties';
}
return p;
}
function viewportDetail() {
var count = 0;
var printstring = '';
printstring += '<table border=\"0\"><tr>'
+ '<th>#</th>'
+ '<th style=\"text-align: left;\">Property</th>'
+ '<th>Supported?<br>y/n</th>'
+ '<th>Value</th>'
+ '</tr>';
for (var i=0;i<props.length;i++) {
if (!self.screen && props[i].indexOf('self.screen') !=
-1) continue;
if (!document.body && props[i].indexOf('document.body')
!= -1) continue;
if (eval(props[i])) {
++count;
printstring +=
'<tr><td class=\"count\">' + count
+ '</td><td>' + props[i]
+ '</td><td class=\"pass\">Yes'
+ '</td><td>' + eval(props[i])
+ '</td></tr>';
} else {
++count;
printstring +=
'<tr><td class=\"count\">' + count
+ '</td><td>' + props[i]
+ '</td><td class=\"fail\">No'
+ '</td><td>' + eval(props[i])
+ '</td></tr>';
}
if (props[i].indexOf('document.body') != -1) {
var end =
props[i].substring(props[i].lastIndexOf('.')+1);
newprop = 'document.documentElement.' + end;
if (eval(newprop)) {
++count;
printstring +=
'<tr><td class=\"count\">' + count
+ '</td><td>' + newprop
+ '</td><td class=\"pass\">Yes'
+ '</td><td>' + eval(newprop)
+ '</td></tr>';
} else {
++count;
printstring +=
'<tr><td class=\"count\">' + count
+ '</td><td>' + newprop
+ '</td><td class=\"fail\">No'
+ '</td><td>' + eval(newprop)
+ '</td></tr>';
}
}
}
printstring += '</table>'
return printstring;
}
function getUA() {
if (!document.getElementById) return;
document.getElementById('uaDetail').innerHTML = getUA();
}
function reGet() {
if (!document.getElementById) return;
document.getElementById('viewportDetail').innerHTM L =
viewportDetail();
}
</script>
</head>
<body>
<h4>Your user agent's properties<sup><a href="#note">1</a></h4>
<pre id="uaDetail">
<script type="text/javascript">
document.write(uaDetail());
</script>
</pre>
<h4>These are the properties that work in your browser:</h4>
<pre id="viewportDetail">
<script type="text/javascript">reGet();</script>
</pre>
<p>(<a href="#" onclick="reGet(); return false">Refresh</a>
list)</p>
<p><a name="note">The user agent values are as reported by
your user
agent (browser). Depending upon the UA you are using, you
may be able
to change these in a preference setting. Some browsers
pretend to
be some other browser by default - please check your UA's
settings
to determine if the values are accurate.</a></p>
</body>
</html>
