What Richard said. Here is a viewport tester that tells you what
properties work for a the user agent it is loaded into.
This has been posted before, but I've done a little extra work and
think this is a better version.
Have fun, Fred.
<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;}
..Yes
{font-size: 14px; background-color: green;
font-weight: bold; text-align: center; color: gold;}
..No
{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>User Agent (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 = '';
var c = '';
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
.indexOf('self.screen') != -1) continue;
if (!document.body && props.indexOf('document.body') != -1)
continue;
(eval(props) || eval(props) == 0 ) ? c = 'Yes' : c = 'No';
++count;
printstring +=
'<tr><td class=\"count\">' + count
+ '</td><td>' + props
+ '</td><td class=\"' + c + '\">' + c
+ '</td><td>' + eval(props)
+ '</td></tr>';
if (props.indexOf('document.body') != -1) {
var end = props.substring(props.lastIndexOf('.')+1);
newprop = 'document.documentElement.' + end;
if (eval(newprop)) {
(eval(newprop)) ? c = 'Yes' : c = 'No';
++count;
printstring +=
'<tr><td class=\"count\">' + count
+ '</td><td>' + newprop
+ '</td><td class=\"' + c + '\">' + c
+ '</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').innerHTML = 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>
<div style="margin-left: 50;"><p id="zz" style="padding-left: 20;"><a
href="#" onclick="
var x = document.getElementById('zz');
var msg = 'offsetTop: ' + x.offsetTop
+ '\noffsetLeft: ' + offsetLeft;
alert(msg);
return false;
">Set offsetTop/Left</a></p></div>
</body></html>
line 10)sizex=document.body.clientWidth