`
高军威
  • 浏览: 182042 次
  • 性别: 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 支持中文 ...
评论
发表评论

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

相关推荐

    判断浏览器内核.zip

    本资料包“判断浏览器内核.zip”主要聚焦于使用JavaScript来检测用户浏览器的内核类型。核心知识点包括： 1. **UserAgent字符串**：在JavaScript中，`navigator.userAgent`属性提供了关于用户浏览器的信息，它是一...

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

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

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

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

    搜狗浏览器2.0 – 高速双内核浏览器

    根据网页类型和用户的使用习惯，浏览器会自动判断并切换到最佳内核，无需用户手动操作。这既方便了用户，又避免了因内核选择不当导致的浏览问题。 **安全与隐私保护** 搜狗浏览器2.0也注重用户的安全和隐私保护。它...

    浏览器判断方法

    ### 浏览器判断方法 在前端开发领域中，针对不同浏览器进行兼容性处理是一项重要的工作。由于不同的浏览器（如Internet Explorer、Firefox、Chrome、Opera、Safari等）对JavaScript的支持程度不同，开发者需要能够...

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

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

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

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

    jquery判断360浏览器

    `navigator.userAgent`属性可以获取到这个字符串，通过解析它，我们可以判断浏览器类型。 `jquery.ua.js`文件通常包含了一些用于解析用户代理字符串的函数，以便于识别浏览器。在jQuery中，我们可以创建一个扩展...

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

    最后，需要强调的是，虽然在某些情况下可能需要针对特定浏览器内核进行优化，但通常建议尽量使用标准的、兼容性较好的Web技术来开发网站，以避免对特定浏览器的过分依赖，确保网站能够在尽可能多的浏览器和设备上...

    如何判断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可直接引入。

    微信判断浏览器自动弹出遮罩层代码

    标题"微信判断浏览器自动弹出遮罩层代码"涉及到的核心知识点包括： 1. **浏览器检测**：首先，我们需要通过JavaScript来检测当前的浏览器环境。常见的方法是检查UserAgent字符串，微信内置浏览器的UserAgent通常...

    处理浏览器内核信息的方法及设备.zip

    在IT领域，浏览器内核是决定网页渲染、脚本执行以及与Web标准交互的核心组件。了解如何处理浏览器内核信息对于开发高性能、跨平台的Web应用至关重要。"处理浏览器内核信息的方法及设备"的主题涵盖了多个关键知识点，...

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

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

    JS判断是否在微信浏览器打开

    这段代码创建了一个`browser`对象，其中包含了一些常用的浏览器内核检测方法。例如，`trident`字段用来检测IE浏览器，`presto`字段用来检测Opera浏览器，等等。同时，它还提供了对移动设备的支持，包括iOS和Android...

    微信判断浏览器自动弹出遮罩层【完整代码】

    微信内置的X5内核浏览器会检测页面中的一些特定事件或行为，比如页面跳转、弹窗等，来决定是否显示遮罩层。要检测这种行为，我们可以利用JavaScript进行实时监控。 下面是一个关键的JavaScript代码片段，用于检测...

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

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

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