`
高军威
  • 浏览: 180678 次
  • 性别: 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`属性提供了关于用户浏览器的信息，它是一...

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

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

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

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

    搜狗浏览器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...

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

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

    js判断浏览器

    ### JavaScript 判断浏览器类型 在Web开发中，有时我们需要根据不同浏览器的特点进行针对性的代码编写或功能适配。本文将详细介绍如何使用JavaScript来检测用户正在使用的浏览器类型。 #### 1. 理解`navigator....

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