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

高军威

浏览: 182021 次
性别:
来自: 北京

最近访客更多访客>>

caorucan

coreycool

zswzhj

fuanyu

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javaScript

浏览器鉴别浏览器

效果图：

代码部分：

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

测试.rar (1.2 KB)
下载次数: 0

分享到：

使用ab进行页面的压力测试 | Windows下面安装和配置Solr 4.9 支持中文 ...

2014-10-09 13:24
浏览 1089
评论(0)
分类:Web前端
查看更多

发表评论

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

相关推荐

java毕设项目之ssm基于SSM的高校共享单车管理系统的设计与实现+vue(完整前后端+说明文档+mysql+lw).zip: 项目包含完整前后端源码和数据库文件环境说明：开发语言：Java 框架：ssm，mybatis JDK版本：JDK1.8 数据库：mysql 5.7 数据库工具：Navicat11 开发软件：eclipse/idea Maven包：Maven3.3 服务器：tomcat7

YOLO算法-贴纸检测数据集-212张图像带标签-部分覆盖-未涵盖-完全覆盖.zip: YOLO系列算法目标检测数据集，包含标签，可以直接训练模型和验证测试，数据集已经划分好，包含数据集配置文件data.yaml，适用yolov5,yolov8,yolov9,yolov7,yolov10,yolo11算法；包含两种标签格:yolo格式（txt文件）和voc格式（xml文件），分别保存在两个文件夹中，文件名末尾是部分类别名称; yolo格式：<class> <x_center> <y_center> <width> <height>，其中： <class> 是目标的类别索引（从0开始）。 <x_center> 和 <y_center> 是目标框中心点的x和y坐标，这些坐标是相对于图像宽度和高度的比例值，范围在0到1之间。 <width> 和 <height> 是目标框的宽度和高度，也是相对于图像宽度和高度的比例值；【注】可以下拉页面，在资源详情处查看标签具体内容；

zigbee CC2530无线自组网协议栈系统代码实现协调器按键控制终端LED灯和继电器动作.zip: 1、嵌入式物联网单片机项目开发例程，简单、方便、好用，节省开发时间。 2、代码使用IAR软件开发，当前在CC2530上运行，如果是其他型号芯片，请自行移植。 3、软件下载时，请注意接上硬件，并确认烧录器连接正常。 4、有偿指导v：wulianjishu666; 5、如果接入其他传感器，请查看账号发布的其他资料。 6、单片机与模块的接线，在代码当中均有定义，请自行对照。 7、若硬件有差异，请根据自身情况调整代码，程序仅供参考学习。 8、代码有注释说明，请耐心阅读。 9、例程具有一定专业性，非专业人士请谨慎操作。

手语图像分类数据集【已标注，约2,500张数据】: 手语图像分类数据集【已标注，约2,500张数据】分类个数【36】：0、1、a、b等【具体查看json文件】划分了训练集、测试集。存放各自的同一类数据图片。如果想可视化数据集，可以运行资源中的show脚本。 CNN分类网络改进：https://blog.csdn.net/qq_44886601/category_12858320.html 【更多图像分类、图像分割（医学）、目标检测（yolo）的项目以及相应网络的改进，可以参考本人主页：https://blog.csdn.net/qq_44886601/category_12803200.html】

CNCAP 2024打分表: CNCAP 2024打分表

基于小程序的智慧校园管理系统源代码（java+小程序+mysql+LW）.zip: 系统可以提供信息显示和相应服务，其管理智慧校园管理系统信息，查看智慧校园管理系统信息，管理智慧校园管理系统。项目包含完整前后端源码和数据库文件环境说明：开发语言：Java JDK版本：JDK1.8 数据库：mysql 5.7 数据库工具：Navicat11 开发软件：eclipse/idea Maven包：Maven3.3 部署容器：tomcat7 小程序开发工具：hbuildx/微信开发者工具

【图像去噪】基于matlab PolSAR GWLS滤波器图像去噪【含Matlab源码 9937期】.zip: Matlab领域上传的视频均有对应的完整代码，皆可运行，亲测可用，适合小白； 1、代码压缩包内容主函数：main.m；调用函数：其他m文件；无需运行运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，私信博主； 3、运行操作步骤步骤一：将所有文件放到Matlab的当前文件夹中；步骤二：双击打开main.m文件；步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询如需其他服务，可私信博主； 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作

影音互动科普网站-JAVA-基于SpringBoot的哈利波特书影音互动科普网站设计与实现（毕业论文）: 影音互动科普网站功能描述影音互动科普网站旨在通过多媒体形式（视频、音频、互动内容等）传播科学知识，提高公众的科学素养。该网站结合娱乐与教育，提供易于理解的科普内容，吸引不同年龄层次的用户参与和学习。以下是该网站的主要功能描述： 1. 用户注册与登录用户注册：用户可以通过电子邮箱、手机号或社交账号（如微信、微博等）注册，提供基本信息并设置密码。用户登录：支持通过注册的账号登录，保障个人信息的安全性，并提供自动登录功能。 2. 科普视频与音频库视频内容：网站提供各类科普视频，包括短视频、纪录片、讲座、实验演示等，覆盖物理、化学、生物、地理、天文等多个领域。音频内容：提供科普音频节目，如科普广播、播客、专题讲座等，便于用户在日常生活中进行学习。视频分类：按科目、难度、年龄层、时长等维度对视频和音频进行分类，帮助用户更精准地找到感兴趣的内容。字幕与多语言支持：提供字幕、翻译和多语种版本，帮助不同语言的用户学习。 3. 互动问答与讨论区专家问答：用户可以向科普专家提问，专家提供详尽的解答，解决用户的科学疑惑。社区讨论：用户可以在视频下方或专题页面中发表评论、提问或与其他用户

倪海厦讲义及笔记，易学数据测算: 倪海厦讲义及笔记，易学数据测算

【组合数学答案】组合数学-苏大李凡长版-课后习题答案: 内容概要：本文档是《组合数学答案-网络流传版.pdf》的内容，主要包含了排列组合的基础知识以及一些经典的组合数学题目。这些题目涵盖了从排列数计算、二项式定理的应用到容斥原理的实际应用等方面。通过对这些题目的解析，帮助读者加深对组合数学概念和技巧的理解。适用人群：适合初学者和有一定基础的学习者。使用场景及目标：可以在学习组合数学课程时作为练习题参考，也可以在复习考试或准备竞赛时使用，目的是提高解决组合数学问题的能力。其他说明：文档中的题目覆盖了组合数学的基本知识点，适合逐步深入学习。每个题目都有详细的解答步骤，有助于读者掌握解题思路和方法。

管理系统开发指南：功能要求、技术栈及安全控制: 内容概要：本文是一篇完整的管理系统开发指南，详细介绍了功能要求、技术栈选择、数据库设计、用户界面搭建以及安全控制等方面的内容。功能要求包括用户管理、权限控制、数据管理、系统日志、通知与消息、统计分析和扩展模块。使用的技术栈涵盖了后端（Java、Python、C#等）和前端（React、Vue.js、Angular等）技术，以及数据库设计和安全控制措施。适合人群：具备一定开发经验的软件工程师和技术管理人员。使用场景及目标：适用于企业级管理系统开发项目，旨在构建一个高效、安全且易于扩展的系统。开发者可以参考本文档进行系统的设计和实现，确保系统满足业务需求。其他说明：本文档提供了详细的步骤和最佳实践，帮助开发者更好地理解和应用管理系统开发的各种技术。通过结合实际案例和实践经验，本文档能够为开发者提供有价值的指导。

听器听力损伤程度分级表.docx: 听器听力损伤程度分级表.docx

MATLAB代码：基于条件风险价值的合作型Stackerlberg博弈微网动态定价与优化调度关键词：微网优化调度条件风险价值合作博弈纳什谈判参考文档：A cooperative Stack: MATLAB代码：基于条件风险价值的合作型Stackerlberg博弈微网动态定价与优化调度关键词：微网优化调度条件风险价值合作博弈纳什谈判参考文档：《A cooperative Stackelberg game based energy management considering price discrimination and risk assessment》完美复现仿真平台：MATLAB yalmip+cplex+mosek 主要内容：代码主要做的是一个基于合作型Stackerlberg博弈的考虑差别定价和风险管理的微网动态定价与调度策略，提出了一个双层能源管理框架，实现多个微网间的P2P能源交易，上层为零商的动态定价模型，目标是社会福利最大化；下层是多个产消者的合作博弈模型，优化各产消者的能量管理策略。同时，采用纳什谈判法对多个产消者的合作剩余进行公平分配，还考虑了运行风险，采用条件风险价值（CVaR）随机规划方法来描述零商的预期损失。求解方面，双层模型被基于KKT条件转为单层模型，模型可以高效求解。这段代码是一个基于合作型Stackelberg博弈的微网

YOLO算法-监控数据集-873张图像带标签-警方-警车-救护车-消防车-跌倒的人-消防员.zip: YOLO系列算法目标检测数据集，包含标签，可以直接训练模型和验证测试，数据集已经划分好，包含数据集配置文件data.yaml，适用yolov5,yolov8,yolov9,yolov7,yolov10,yolo11算法；包含两种标签格:yolo格式（txt文件）和voc格式（xml文件），分别保存在两个文件夹中，文件名末尾是部分类别名称; yolo格式：<class> <x_center> <y_center> <width> <height>，其中： <class> 是目标的类别索引（从0开始）。 <x_center> 和 <y_center> 是目标框中心点的x和y坐标，这些坐标是相对于图像宽度和高度的比例值，范围在0到1之间。 <width> 和 <height> 是目标框的宽度和高度，也是相对于图像宽度和高度的比例值；【注】可以下拉页面，在资源详情处查看标签具体内容；

(175526236)【动漫网页设计】源码免费分享，让你的网站更有趣！: 20块钱买的【动漫网页设计】源码，免费分享出来啦,如果要积分那是系统自动涨的啦。内容概要：本资源是一份动漫网页设计的源码，价格仅为20元，作者将其免费分享给大家。该源码包含了动漫元素的设计，包括背景、图标、按钮等，同时也提供了一些常见的网页布局和交互效果。通过该资源，可以学习到动漫网页设计的基本原理和技巧。适用人群：本资源适用于对动漫网页设计感兴趣的人群，包括网页设计师、UI设计师、前端开发工程师等。同时，对于想要学习动漫网页设计的初学者也非常适用。使用场景及目标：该资源可以用于学习和实践动漫网页设计的技巧和原理。通过学习该源码，可以了解到动漫网页设计的基本要素和设计思路，同时也可以借鉴其中的设计元素和交互效果，应用到自己的网页设计中。其他说明：本资源是作者自己设计的，经过了多次修改和优化，具有一定的参考价值。同时，作者也将其价格设置的非常低，希望更多的人可以学习到动漫网页设计的技巧和方法。如果您对该资源有任何疑问或建议，欢迎在评论区留言，作者会尽快回复。。内容来源于网络分享，如有侵权请联系我删除。另外如果没有积分的同学需要下载，请私信我。

C++程序设计-参考答案: 自考本科 C++程序设计-课本参考答案

每周质量安全排查报告.docx: 每周质量安全排查报告.docx

YOLO算法-杂草检测项目数据集-3970张图像带标签-杂草.zip: YOLO算法-杂草检测项目数据集-3970张图像带标签-杂草.zip

内存搜索工具(易).rar: 内存搜索工具(易).rar

2024 AGM Meritech Market Section (External).pdf: AI大模型研究相关报告

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

js常用的对象扩展方法

js日期溢出

向上滚动到浏览器顶部固定住，向下滚动出浏览器顶部回复原状

一个页面多个倒计时js代码

网页 返回头部

页面复制文本信息

IE 玛德好霸道，就你特殊

js代码

Js汉字和Unicode编码互转 Unicode加密 Unicode解密

js运算bug，等等

Ajax表单提交的特殊字符处理

复选框 浏览器兼容问题解决方案

选中复选框后按钮可用，不选中不可用

CSS中的绝对定位与相对定位

Jquery 收藏本站代码

ie6和ie7下z-index bug的解决办法

【转】jsp、freemarker、velocity比较

常用js方法

图片上下无间隙滚动

JS实现文本不间断上线滚动效果【转】

最近访客更多访客>>

网页返回头部

复选框浏览器兼容问题解决方案