<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Get Client Bound By Brower Type</title>
</head>
<body style="font-family:Verdana; font-size: 15px;">
<form id="form1" runat="server">
<asp:ScriptManager runat="server" ID="ScriptManager1" />
<script language="javascript" type="text/javascript">
document.write(window.navigator.userAgent);
</script>
<hr />
<script language="javascript" type="text/javascript">
document.write("Has Debugger Statement: " + Sys.Browser.hasDebuggerStatement + "<br />");
document.write("Name: " + Sys.Browser.name + "<br />");
document.write("Version: " + Sys.Browser.version);
</script>
<script language="javascript" type="text/javascript">
function getClientBounds()
{
var clientWidth;
var clientHeight;
switch (Sys.Browser.agent)
{
case Sys.Browser.InternetExplorer:
clientWidth = document.compatMode == "CSS1Compat" ?
document.documentElement.clientWidth : document.body.clientWidth;
clientHeight = document.compatMode == "CSS1Compat" ?
document.documentElement.clientHeight : document.body.clientHeight;
break;
case Sys.Browser.Safari:
clientWidth = window.innerWidth;
clientHeight = window.innerHeight;
break;
case Sys.Browser.Opera:
clientWidth = Math.min(window.innerWidth, document.body.clientWidth);
clientHeight = Math.min(window.innerHeight, document.body.clientHeight);
break;
default: // FireFox, etc.
clientWidth = Math.min(window.innerWidth, document.documentElement.clientWidth);
clientHeight = Math.min(window.innerHeight, document.documentElement.clientHeight);
break;
}
return {width: clientWidth, height: clientHeight};
}
</script>
<hr />
<div id="clientBounds"></div>
<script language="javascript" type="text/javascript">
window.onresize = function()
{
var bounds = getClientBounds();
$get("clientBounds").innerHTML =
String.format("Width: {0}, Height: {1}",
bounds.width, bounds.height);
}
</script>
</form>
</body>
</html>