`
高军威
  • 浏览: 175626 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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

浏览器鉴别浏览器 
阅读更多
效果图：


代码部分： 

<!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> &nbsp; X &nbsp;<span id="show_g"></span><br/>
				当前浏览器内网页的(宽，高) (包括边线的宽, 谷歌 IE 火狐 QQ 浏览器 和 上面的效果 一样) <br/>
				<span id="show_b_k"></span> &nbsp; X &nbsp;<span id="show_b_g"></span><br/>
				
				网页正文全文宽(宽，高)(包括边线的宽, IE 火狐 QQ 浏览器 和 上面的效果 一样，谷歌 浏览器 的宽度、高度多大了点，应该是网页和浏览器之间的内边距) <br/>
				<span id="show_zw_k"></span> &nbsp; X &nbsp;<span id="show_zw_g"></span><br/>
				
				网页被卷去的(头部，左侧)（IE 火狐 不支持，谷歌支持） <br/>
				<span id="show_jq_k"></span> &nbsp; X &nbsp;<span id="show_jq_g"></span><br/>
				
				网页正文部分(头部，左侧)（仅IE 支持） <br/>
				<span id="show_bf_k"></span> &nbsp; X &nbsp;<span id="show_bf_g"></span><br/>
				
				屏幕分辨率(宽，高)（都支持） <br/>
				<span id="show_pm_k"></span> &nbsp; X &nbsp;<span id="show_pm_g"></span><br/>
				
				屏幕可用工作区(宽，高)（都支持） <br/>
				<span id="show_ky_k"></span> &nbsp; X &nbsp;<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>


调整浏览器窗口获得窗口的大小 

<!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>
分享到：
| Windows下面安装和配置Solr 4.9 支持中文 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    判断浏览器内核是微信还是QQ 安卓还是IOS

    判断浏览器内核是微信还是QQ 安卓还是IOS 根据结果写样式与方法

    js判断浏览器版本以及浏览器内核的方法

    本文实例讲述了js判断浏览器版本以及浏览器内核的方法。分享给大家供大家参考。具体实现方法如下： js判断是否移动端及浏览器内核 var browser = { versions: function() { var u = navigator.userAgent; return...

    判断浏览器内核.zip

    判断浏览器内核js语句

    jQuery.browser.js 补加当前浏览器内核/版本判断公共方法

    快速获取，当前浏览器内核及版本，对于不同浏览器的内核判断的公共方法

    如何判断PC端浏览器内核

    如何判断PC端浏览器内核 XML/HTML Code复制内容到剪贴板 browser = { /** * @property {boolean} ie 检测当前浏览器是否为IE */ ie : /(msie\s|trident.*rv:)([\w.]+)/.test(agent), /** * ...

    js检测各种浏览器

    js检测ie8，ie9，ie10，ie11，edge，chrome，safari，opera。vue可直接引入。

    一段非常简单的js判断浏览器的内核

    　在前端开发过程中，有时我们需要判断浏览器的内核前缀，对不同的浏览器做出不同的处理，因此我们可以这么做。 　alert&#40;element.style.webkitTransition&#41;; 这个是获取以webkit为前缀的transition值。但如果...

    IE、Chrome 内核系列浏览器域名监控跳转工具 v1.2

    《关于UIAutomation读取/检测/判断浏览器域名并跳转的一点疑惑》 文章中演示的完整工具（带源码，可二次开发。） 地址：https://blog.csdn.net/qq_39190622/article/details/129474795 该工具主要利用 UI...

    JS判断是否360安全浏览器极速内核的方法

    主要介绍了JS判断是否360安全浏览器极速内核的方法,对比分析了360安全浏览器极速内核与其他主流浏览器内核的区别及对应的判断技巧,需要的朋友可以参考下

    判断浏览器的内核及版本号方法汇总

    通过jquery 判断浏览器的内核及版本号 代码如下: [removed]  $(function () {  if ($.browser.msie && ($.browser.version == “7.0”)) {  $(“#yourannet”).css(“margin-left”, “10px”);  } //IE7...

    js判断是pc判断浏览器调用不同css样式

    function getBrowser() { var i = window.navigator.userAgent; var isChrome = i.indexOf("Chrome") && window.chrome; var issafari=i.indexOf("safari") && window....js判断不同浏览器内核调用不同css样式

    获取和控制Firefox火狐非IE核心浏览器的URL网址

    是用delphi7编写的，专门针对火狐Firefox浏览器。部分源码如下： procedure TForm1.Button1Click(Sender: TObject); var a,b:string; begin //火狐浏览器在最小化或被其它窗口挡住，仍然可以获取成功。 if ...

    利用js判断浏览器类型(是否为IE,Firefox,Opera浏览器)

    现在的浏览器大概有好几种,各个人的喜好也不同，所以也就用着不同的浏览器!我们开发的人来说经常要加个判断，要不可能某些功能没法正常使用。要是没加个判断就会给大家带来些麻烦!虽然可能大家的喜好不同!用的系统也...

    用VC++ 对 IE 浏览器进行高级操作

    很多软件安装以后都会在 IE 浏览器的工具栏上添 加一个自己的启动按钮，只要点击该按钮就可以启动自 己的程序，比较典型的软件有网络蚂蚁、金山词霸、网 际快车（FlashGet）等等。如图 1 所示，“FlashGet” 按钮...

    猎豹浏览器 v7.1.3622.400.zip

    猎豹首创的智能切换引擎，将切换过程完全自动化，可以根据页面代码特征判断页面类型并自动选择不同的内核引擎来渲染页面，无需用户操心。软件还整合了金山自家的BIPS进行安全防护，并对对Chrome内核超过100项改进, ...

Magicbox
Global site tag (gtag.js) - Google Analytics