得到浏览器尺寸，判断浏览器内核

最新推荐文章于 2023-05-30 10:16:48 发布

iteye_20151

最新推荐文章于 2023-05-30 10:16:48 发布

阅读量96

点赞数

分类专栏： javaScript 文章标签：浏览器鉴别浏览器

本文链接：https://blog.csdn.net/iteye_20151/article/details/82606441

版权

javaScript 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

[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]


<!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>

iteye_20151

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
得到浏览器尺寸，判断浏览器内核

[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][/siz...
复制链接

扫一扫