JS获取当前网页大小以及屏幕分辨率等


Posted in Javascript onSeptember 05, 2014

效果如下:
JS获取当前网页大小以及屏幕分辨率等

代码如下:

<html>
<head>
<title>获取当前对象大小以及屏幕分辨率等</title>
<body>
<div style=" width:88%;margin:30px auto; color:blue;" id="div_html">
</div>
<script type="text/javascript">
var s = ""; 
s += " 网页可见区域宽:"+ document.body.clientWidth+"<br />"; 
s += " 网页可见区域高:"+ document.body.clientHeight+"<br />"; 
s += " 网页可见区域宽:"+ document.body.offsetWidth + " (包括边线和滚动条的宽)"+"<br />"; 
s += " 网页可见区域高:"+ document.body.offsetHeight + " (包括边线的宽)"+"<br />"; 
s += " 网页正文全文宽:"+ document.body.scrollWidth+"<br />"; 
s += " 网页正文全文高:"+ document.body.scrollHeight+"<br />"; 
s += " 网页被卷去的高(ff):"+ document.body.scrollTop+"<br />"; 
s += " 网页被卷去的高(ie):"+ document.documentElement.scrollTop+"<br />"; 
s += " 网页被卷去的左:"+ document.body.scrollLeft+"<br />"; 
s += " 网页正文部分上:"+ window.screenTop+"<br />"; 
s += " 网页正文部分左:"+ window.screenLeft+"<br />"; 
s += " 屏幕分辨率的高:"+ window.screen.height+"<br />"; 
s += " 屏幕分辨率的宽:"+ window.screen.width+"<br />"; 
s += " 屏幕可用工作区高度:"+ window.screen.availHeight+"<br />"; 
s += " 屏幕可用工作区宽度:"+ window.screen.availWidth+"<br />"; 
s += " 你的屏幕设置是 "+ window.screen.colorDepth +" 位彩色"+"<br />"; 
s += " 你的屏幕设置 "+ window.screen.deviceXDPI +" 像素/英寸"+"<br />"; 

document.getElementById("div_html").innerHTML = s;
</script>
</body>
</html>

代码说明图如下:

JS获取当前网页大小以及屏幕分辨率等

Javascript 相关文章推荐
JQUERY操作JSON实例代码
Feb 09 Javascript
JQuery设置文本框和密码框得到焦点时的样式
Aug 30 Javascript
用jquery仿做发微博功能示例
Apr 18 Javascript
jQuery 计算iframe 窗口大小的方法
May 13 Javascript
JavaScript前端图片加载管理器imagepool使用详解
Dec 29 Javascript
js实现简单折叠、展开菜单的方法
Aug 28 Javascript
【经典源码收藏】基于jQuery的项目常见函数封装集合
Jun 07 Javascript
AngularJS基础 ng-keyup 指令简单示例
Aug 02 Javascript
jQuery Ajax前后端使用JSON进行交互示例
Mar 17 Javascript
解决BootStrap Fileinput手机图片上传显示旋转问题
Jun 01 Javascript
VUEX 数据持久化,刷新后重新获取的例子
Nov 12 Javascript
Vue实现多标签选择器
Nov 28 Javascript
JS来动态的修改url实现对url的增删查改
Sep 05 #Javascript
jQuery表格插件datatables用法总结
Sep 05 #Javascript
jQuery中index()的用法分析
Sep 05 #Javascript
使用jquery解析XML的方法
Sep 05 #Javascript
JavaScript避免内存泄露及内存管理技巧
Sep 05 #Javascript
javascript获取dom的下一个节点方法
Sep 05 #Javascript
原生JavaScript生成GUID的实现示例
Sep 05 #Javascript
You might like
初步介绍PHP扩展开发经验分享
2012/09/06 PHP
php 无法加载mcrypt.dll的解决办法
2013/04/03 PHP
探讨如何在php168_cms中提取验证码
2013/06/08 PHP
如何让搜索引擎抓取AJAX内容解决方案
2014/08/25 PHP
php session的锁和并发
2016/01/22 PHP
Yii2.0 Basic代码中路由链接被转义的处理方法
2016/09/21 PHP
关于PHP转换超过2038年日期出错的问题解决
2017/06/28 PHP
PHP ob缓存以及ob函数原理实例解析
2020/11/13 PHP
JavaScript 闭包在封装函数时的简单分析
2009/11/28 Javascript
纯Javascript实现ping功能的方法
2015/03/20 Javascript
基于javascript显示当前时间以及倒计时功能
2016/03/18 Javascript
JavaScript获取当前时间向前推三个月的方法示例
2017/02/04 Javascript
详解最新vue-cli 2.9.1的webpack存在问题
2017/12/16 Javascript
AngularJS select加载数据选中默认值的方法
2018/02/28 Javascript
详解angular部署到iis出现404解决方案
2018/08/14 Javascript
javascript中一些奇葩的日期换算方法总结
2018/11/14 Javascript
微信小程序的mpvue框架快速上手指南
2019/05/15 Javascript
[01:08:10]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS LGD-CDEC
2014/05/22 DOTA
[46:14]完美世界DOTA2联赛PWL S3 Magma vs INK ICE 第一场 12.11
2020/12/16 DOTA
Python cookbook(数据结构与算法)将序列分解为单独变量的方法
2018/02/13 Python
对Python中list的倒序索引和切片实例讲解
2018/11/15 Python
关于python3中setup.py小概念解析
2019/08/22 Python
详解numpy.ndarray.reshape()函数的参数问题
2020/10/13 Python
python中pow函数用法及功能说明
2020/12/04 Python
CSS3实现swap交换动画
2016/01/19 HTML / CSS
个人找工作自荐信格式
2013/09/21 职场文书
客服主管岗位职责
2013/12/13 职场文书
《桂林山水》教学反思
2014/02/08 职场文书
化工操作工岗位职责
2014/04/29 职场文书
幼儿园食品安全责任书
2015/05/08 职场文书
2015年乡镇组织委员工作总结
2015/10/23 职场文书
励志正能量20句:送给所有为梦想拼搏的人
2019/11/11 职场文书
使用Redis实现秒杀功能的简单方法
2021/05/08 Redis
Python3 类型标注支持操作
2021/06/02 Python
在Spring-Boot中如何使用@Value注解注入集合类
2021/08/02 Java/Android
pytest实现多进程与多线程运行超好用的插件
2022/07/15 Python