js获取浏览器基本信息大全


Posted in Javascript onNovember 27, 2014

网页可见区域宽:document.body.clientWidth
网页可见区域高:document.body.clientHeight
网页可见区域宽:document.body.offsetWidth (包括边线的宽)
网页可见区域高:document.body.offsetHeight (包括边线的宽)
网页正文全文宽:document.body.scrollWidth
网页正文全文高:document.body.scrollHeight
网页被卷去的高:document.body.scrollTop
网页被卷去的左:document.body.scrollLeft
网页正文部分上:window.screenTop
网页正文部分左:window.screenLeft
屏幕分辨率的高:window.screen.height
屏幕分辨率的宽:window.screen.width
屏幕可用工作区高度:window.screen.availHeight
屏幕可用工作区宽度:window.screen.availWidth

HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

IE,FireFox 差异如下

IE6.0、FF1.06+:

clientWidth = width + padding

clientHeight = height + padding

offsetWidth = width + padding + border

offsetHeight = height + padding + border

IE5.0/5.5

clientWidth = width - border

clientHeight = height - border

offsetWidth = width

offsetHeight = height

(需要提一下:CSS中的margin属性,与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)

-------------------

技术要点

本节代码主要使用了Document对象关于窗口的一些属性,这些属性的主要功能和用法如下。

要得到窗口的尺寸,对于不同的浏览器,需要使用不同的属性和方法:若要检测窗口的真实尺寸,在Netscape下需要使用Window的属性;在 IE下需要深入Document内部对body进行检测;在DOM环境下,若要得到窗口的尺寸,需要注意根元素的尺寸,而不是元素。

Window对象的innerWidth属性包含当前窗口的内部宽度。Window对象的innerHeight属性包含当前窗口的内部高度。

Document对象的body属性对应HTML文档的标签。Document对象的documentElement属性则表示HTML文档的根节点。

document.body.clientHeight表示HTML文档所在窗口的当前高度。document.body. clientWidth表示HTML文档所在窗口的当前宽度。

关于获取各种浏览器可见窗口大小的一点点研究。

在我本地测试当中:在IE、FireFox、Opera下都可以使用

document.body.clientWidth

document.body.clientHeight即可获得,很简单,很方便。

而在公司项目当中:Opera仍然使用

document.body.clientWidth

document.body.clientHeight

可是IE和FireFox则使用

document.documentElement.clientWidth

document.documentElement.clientHeight

原来是W3C的标准在作怪啊http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

如果在页面中添加这行标记的话

在IE中:document.body.clientWidth ==> BODY对象宽度

document.body.clientHeight ==> BODY对象高度

document.documentElement.clientWidth ==> 可见区域宽度

document.documentElement.clientHeight ==> 可见区域高度

在FireFox中:document.body.clientWidth ==> BODY对象宽度

document.body.clientHeight ==> BODY对象高度

document.documentElement.clientWidth ==> 可见区域宽度

document.documentElement.clientHeight ==> 可见区域高度?

在Opera中: document.body.clientWidth ==> 可见区域宽度

document.body.clientHeight ==> 可见区域高度

document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)

而如果没有定义W3C的标准,

则IE为:document.documentElement.clientWidth ==> 0

document.documentElement.clientHeight ==> 0

FireFox为:document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)

document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)

Opera为:document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)

document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)

真是一件麻烦事情,其实就前端设计开发来看,宁可少一些对象和方法,不使用最新的标准要方便许多啊。但是跟不上潮流就永远做不了一个高级设计师,所以这些知识我们还是必须要理解和熟练掌握的。

Javascript 相关文章推荐
用javascript连接access数据库的方法
Nov 17 Javascript
JQuery1.4+ Ajax IE8 内存泄漏问题
Oct 15 Javascript
颜色选择器 Color Picker,IE,Firefox,Opera,Safar
Nov 25 Javascript
一个简单的动态加载js和css的jquery代码
Sep 01 Javascript
了不起的node.js读书笔记之node.js中的特性
Dec 22 Javascript
JavaScript实现点击单元格改变背景色的方法
Feb 12 Javascript
jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】
Aug 20 Javascript
妙用Bootstrap的 popover插件实现校验表单提示功能
Aug 29 Javascript
Vue服务端渲染和Vue浏览器端渲染的性能对比(实例PK )
Mar 31 Javascript
解决webpack无法通过IP地址访问localhost的问题
Feb 22 Javascript
详解使用create-react-app添加css modules、sasss和antd
Jul 31 Javascript
JavaScript数据结构与算法之检索算法实例分析【顺序查找、最大最小值、自组织查询】
Feb 22 Javascript
jQuery实现多按钮单击变色
Nov 27 #Javascript
jQuery的ready方法详解
Nov 27 #Javascript
javascript 面向对象封装与继承
Nov 27 #Javascript
javascript制作坦克大战全纪录(2)
Nov 27 #Javascript
javascript制作坦克大战全纪录(1)
Nov 27 #Javascript
使用jsonp完美解决跨域问题
Nov 27 #Javascript
JavaScript变量声明详解
Nov 27 #Javascript
You might like
印尼林东PWN黄金曼特宁咖啡豆:怎么冲世界上最醇厚的咖啡冲煮教程
2021/03/03 冲泡冲煮
php中get_defined_constants函数用法实例分析
2015/05/12 PHP
PHP的Laravel框架结合MySQL与Redis数据库的使用部署
2016/03/21 PHP
用js 让图片在 div或dl里 居中,底部对齐
2008/01/21 Javascript
Extjs入门之动态加载树代码
2010/04/09 Javascript
FireFox下XML对象转化成字符串的解决方法
2011/12/09 Javascript
JQuery插入DOM节点的方法
2015/06/11 Javascript
JavaScript实现的经典文件树菜单效果
2015/09/08 Javascript
编写高性能Javascript代码的N条建议
2015/10/12 Javascript
AngularJs concepts详解及示例代码
2016/09/01 Javascript
Angular企业级开发——MVC之控制器详解
2017/02/20 Javascript
JS html时钟制作代码分享
2017/03/03 Javascript
jquery ui sortable拖拽后保存位置
2017/04/27 jQuery
vue兄弟组件传递数据的实例
2018/09/06 Javascript
Vue实现本地购物车功能
2018/12/05 Javascript
详解如何给React-Router添加路由页面切换时的过渡动画
2019/04/25 Javascript
bootstrap-table formatter 使用vue组件的方法
2019/05/09 Javascript
在vue中使用Base64转码的案例
2020/08/07 Javascript
[43:48]Ti4正赛第一天 VG vs NEWBEE 2
2014/07/19 DOTA
python中类的一些方法分析
2014/09/25 Python
Django REST为文件属性输出完整URL的方法
2017/12/18 Python
python操作oracle的完整教程分享
2018/01/30 Python
小白如何入门Python? 制作一个网站为例
2018/03/06 Python
python+opencv+caffe+摄像头做目标检测的实例代码
2018/08/03 Python
matplotlib实现热成像图colorbar和极坐标图的方法
2018/12/13 Python
python实现转盘效果 python实现轮盘抽奖游戏
2019/01/22 Python
Python drop方法删除列之inplace参数实例
2020/06/27 Python
浅谈django不使用restframework自定义接口与使用的区别
2020/07/15 Python
html5播放视频且动态截图实现步骤与代码(支持safari其他未测试)
2013/01/06 HTML / CSS
欧姆龙医疗保健与医疗产品:Omron Healthcare
2020/02/10 全球购物
英国现代、当代和设计师家具店:Furntastic
2020/07/18 全球购物
Java中有几种类型的流?JDK为每种类型的流提供了一些抽象类以供继承,请说出他们分别是哪些类?
2012/05/30 面试题
学习委员自我鉴定
2014/01/13 职场文书
建筑安全生产目标责任书
2014/07/23 职场文书
2014年信息宣传工作总结
2014/12/18 职场文书
Idea连接MySQL数据库出现中文乱码的问题
2021/04/14 MySQL