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>Viewpo rt Tester</title>
<meta name="author" content="Variou s">
<meta name="keywords" content="">
<meta name="descripti on" 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.pageXOffs et',
'self.pageYOffs et',
'self.screenX',
'self.screenY',
'self.innerHeig ht',
'self.innerWidt h',
'self.outerHeig ht',
'self.outerWidt h',
'self.screen.he ight',
'self.screen.wi dth',
'self.screen.av ailHeight',
'self.screen.av ailWidth',
'self.screen.av ailTop',
'self.screen.av ailLeft',
'self.screen.To p',
'self.screen.Le ft',
'self.screenTop ',
'self.screenLef t',
'self.screen.co lorDepth',
'self.screen.pi xelDepth',
'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;\">Propert y</th>'
+ '<th style=\"text-align: left;\">Value</th</tr>';
if (navigator) {
var x = navigator;
p += '<tr><td>CodeNa me</td><td>' + x.appCodeName +
' </td></tr>'
p += '<tr><td>MinorV ersion</td><td>' + x.appMinorVersi on
+ ' </td></tr>'
p +='<tr><td>Name </td><td>' + x.appName + ' </td></tr>'
p +='<tr><td>Vers ion</td><td>' + x.appVersion +
' </td></tr>'
p +='<tr><td>Cook ieEnabled</td><td>' + x.cookieEnabled +
' </td></tr>'
p +='<tr><td>CPUC lass</td><td>' + x.cpuClass +
' </td></tr>'
p +='<tr><td>OnLi ne</td><td>' + x.onLine + ' </td></tr>'
p +='<tr><td>Plat form</td><td>' + x.platform +
' </td></tr>'
p +='<tr><td>UA</td><td>' + x.userAgent + ' </td></tr>'
p +='<tr><td>Brow serLanguage</td><td>' +
x.browserLangua ge + ' </td></tr>'
p +='<tr><td>Syst emLanguage</td><td>' + x.systemLanguag e
+ ' </td></tr>'
p +='<tr><td>User Language</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\"><t r>'
+ '<th>#</th>'
+ '<th style=\"text-align: left;\">Propert y</th>'
+ '<th>Supported? <br>y/n</th>'
+ '<th>Value</th>'
+ '</tr>';
for (var i=0;i<props.len gth;i++) {
if (!self.screen && props[i].indexOf('self. screen') !=
-1) continue;
if (!document.body && props[i].indexOf('docum ent.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('docum ent.body') != -1) {
var end =
props[i].substring(prop s[i].lastIndexOf('. ')+1);
newprop = 'document.docum entElement.' + 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.getE lementById) return;
document.getEle mentById('uaDet ail').innerHTML = getUA();
}
function reGet() {
if (!document.getE lementById) return;
document.getEle mentById('viewp ortDetail').inn erHTML =
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="viewportDet ail">
<script type="text/javascript">reG et();</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>
