得到浏览器尺寸，判断浏览器内核
程序员文章站
2022-04-05 10:29:00
...
[size=medium][color=blue][b]效果图：[/b][/color][/size]
[img]http://dl.iteye.com/upload/picture/pic/131451/71c8d22b-4080-39e6-888d-1053d5cc10e4.gif[/img]
[b][size=medium][color=blue]代码部分：[/color][/size][/b]
[b][size=medium][color=blue]调整浏览器窗口获得窗口的大小[/color][/size][/b]
[img]http://dl.iteye.com/upload/picture/pic/131451/71c8d22b-4080-39e6-888d-1053d5cc10e4.gif[/img]
[b][size=medium][color=blue]代码部分：[/color][/size][/b]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>测试</title>
<script>
window.onscroll = function(){
var show_k = document.body.clientWidth;
var show_g = document.body.clientHeight;
document.getElementById("show_k").innerHTML = show_k;
document.getElementById("show_g").innerHTML = show_g;
var show_b_k = document.body.offsetWidth;
var show_b_g = document.body.offsetHeight;
document.getElementById("show_b_k").innerHTML = show_b_k;
document.getElementById("show_b_g").innerHTML = show_b_g;
var show_zw_k = document.body.scrollWidth;
var show_zw_g = document.body.scrollHeight ;
document.getElementById("show_zw_k").innerHTML = show_zw_k;
document.getElementById("show_zw_g").innerHTML = show_zw_g;
var show_jq_k = document.body.scrollTop;
var show_jq_g = document.body.scrollLeft;
document.getElementById("show_jq_k").innerHTML = show_jq_k;
document.getElementById("show_jq_g").innerHTML = show_jq_g;
var show_bf_k = window.screenTop;
var show_bf_g = window.screenLeft;
document.getElementById("show_bf_k").innerHTML = show_bf_k;
document.getElementById("show_bf_g").innerHTML = show_bf_g;
var show_pm_k = window.screen.width;
var show_pm_g = window.screen.height;
document.getElementById("show_pm_k").innerHTML = show_pm_k;
document.getElementById("show_pm_g").innerHTML = show_pm_g;
var show_ky_k = window.screen.availWidth;
var show_ky_g = window.screen.availHeight;
document.getElementById("show_ky_k").innerHTML = show_ky_k;
document.getElementById("show_ky_g").innerHTML = show_ky_g;
var cuizhi = document.documentElement.scrollTop;
document.getElementById("cuizhi").innerHTML = cuizhi;
//window.scrollBy(0,0);
}
function getOs()
{
alert(navigator.userAgent);
var OsObject = "";
if(navigator.userAgent.indexOf("MSIE")>0) {
return "MSIE";
}
if(isChrome=navigator.userAgent.indexOf("Chrome")>0) {
return "Chrome";
}
if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){
return "Firefox";
}
if(isSafari=navigator.userAgent.indexOf("Safari")>0) {
return "Safari";
}
if(isCamino=navigator.userAgent.indexOf("Camino")>0){
return "Camino";
}
if(isMozilla=navigator.userAgent.indexOf("Gecko/")>0){
return "Gecko";
}
}
alert("您的浏览器类型为:"+getOs());
</script>
</head>
<body id="top">
<div style="height:300px;width:100%;">
<div style="position:fixed;top:10px;left:10px;">
当前浏览器内网页的(宽，高)<br/>
<span id="show_k"></span> X <span id="show_g"></span><br/>
当前浏览器内网页的(宽，高) (包括边线的宽, 谷歌 IE 火狐 QQ 浏览器 和 上面的效果 一样) <br/>
<span id="show_b_k"></span> X <span id="show_b_g"></span><br/>
网页正文全文宽(宽，高)(包括边线的宽, IE 火狐 QQ 浏览器 和 上面的效果 一样，谷歌 浏览器 的宽度、高度多大了点，应该是网页和浏览器之间的内边距) <br/>
<span id="show_zw_k"></span> X <span id="show_zw_g"></span><br/>
网页被卷去的(头部，左侧)（IE 火狐 不支持，谷歌支持） <br/>
<span id="show_jq_k"></span> X <span id="show_jq_g"></span><br/>
网页正文部分(头部，左侧)（仅IE 支持） <br/>
<span id="show_bf_k"></span> X <span id="show_bf_g"></span><br/>
屏幕分辨率(宽，高)（都支持） <br/>
<span id="show_pm_k"></span> X <span id="show_pm_g"></span><br/>
屏幕可用工作区(宽，高)（都支持） <br/>
<span id="show_ky_k"></span> X <span id="show_ky_g"></span><br/>
<span id="cuizhi"></span><br/>
<a href="http://www.cnblogs.com/top5/archive/2009/05/07/1452135.html">http://www.cnblogs.com/top5/archive/2009/05/07/1452135.html</a>
</div>
</div>
<div style="height:300px;width:100%;background-color:#dddddd;"></div>
<div style="height:300px;width:100%;background-color:#ffffff;"></div>
<div style="height:300px;width:100%;background-color:#00ff00;"></div>
<div style="height:300px;width:100%;background-color:#ff0000;"></div>
<div style="height:300px;width:100%;background-color:#eeff00;"></div>
<div style="height:300px;width:100%;background-color:#ddeeff;"></div>
<a href="#top" target="_self" style="position:fixed;right:10px; bottom:10px;">返回顶部</a>
</body>
</html>
[b][size=medium][color=blue]调整浏览器窗口获得窗口的大小[/color][/size][/b]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>请调整浏览器窗口</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
</head>
<body>
<h2 align="center">请调整浏览器窗口大小</h2><hr>
<form action="#" method="get" name="form1" id="form1">
<!--显示浏览器窗口的实际尺寸-->
浏览器窗口 的 实际高度: <input type="text" name="availHeight" size="4"><br>
浏览器窗口 的 实际宽度: <input type="text" name="availWidth" size="4"><br>
</form>
<script type="text/javascript">
<!--
var winWidth = 0;
var winHeight = 0;
function findDimensions() //函数：获取尺寸
{
//获取窗口宽度
if (window.innerWidth)
winWidth = window.innerWidth;
else if ((document.body) && (document.body.clientWidth))
winWidth = document.body.clientWidth;
//获取窗口高度
if (window.innerHeight)
winHeight = window.innerHeight;
else if ((document.body) && (document.body.clientHeight))
winHeight = document.body.clientHeight;
//通过深入Document内部对body进行检测，获取窗口大小
if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)
{
winHeight = document.documentElement.clientHeight;
winWidth = document.documentElement.clientWidth;
}
//结果输出至两个文本框
document.form1.availHeight.value= winHeight;
document.form1.availWidth.value= winWidth;
}
findDimensions();
//调用函数，获取数值
window.onresize=findDimensions;
//-->
</script>
</body>
</html>