文档章节

获取浏览器可视区域的宽度和高度

姜鹏飞
 姜鹏飞
发布于 2013/08/01 15:58
字数 160
阅读 163
收藏 0

一直都使用window.innerWidth和document.body.clientWidth获取window可视区域的宽度,查阅网上得到的结果是这样一个通用解决方案:

var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

经测试发现在chrome中:window.innerWidth获取的是包括了滚动条的宽度的。通常情况下document.documentElement.clientWidth和document.body.clientWidth,获取的宽度是去除滚动条后的宽度。但经过测试,如果为body设置了margin, document.body.clientWidth得出的宽度是浏览器可见宽度减去margin-left和margin-right后的宽度,最后只有 document.documentElement.clientWidth得到的宽度才是正确的。


© 著作权归作者所有

姜鹏飞
粉丝 2
博文 1
码字总数 160
作品 0
成都
高级程序员
私信 提问
加载中

评论(0)

jquery获取浏览器窗口的属性

在jQuery中获取浏览器及页面的长度与宽度主要用到以下几个代码: $(window).height()           //浏览器时下窗口可视区域高度 $(document).height()          //浏览器时...

lee123lee
2014/02/02
518
1
页面居中居中

.showpigimg{ max-height: 100%; max-width: 100%; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0 } 获取宽高 Javascript: alert(document.body.clientWidth); ......

SKYCOBS
2016/05/16
30
0
jQuery HTML操作学习笔记

学习资料 jQuery教程 获取 1.获取、设置元素的内容 1.1获取或设置目标元素的文本内容 语法 $(selector).text(); 获取元素文本内容$(selector).text(content);设置元素的文本内容$(selector)...

inw3cschool
2017/04/24
0
0
css---【vw,vh】进行自适应布局单位

在进行CSS3自适应布局,会用到 vw 和 vh 进行布局 视口单位(Viewport units) 什么是视口? 在桌面端,视口指的是在桌面端,指的是浏览器的可视区域;而在移动端,它涉及3个视口:Layout View...

帅到要去报警
2019/08/01
0
0
JS,Jquery获取各种屏幕的宽度和高度

Javascript: 网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight 网页可见区域宽: document.body.offsetWidth (包括边线的宽) 网页可见区域高: do...

pureboys
2013/06/06
374
1

没有更多内容

加载失败,请刷新页面

加载更多

人脸识别签到闸机 测温门禁通道 智能口罩识别

艾力奋口罩人脸识别测温闸机: 在展览会议期间,可对体温异常人员精确筛查告警:通过人脸识别AI算法和黑体对温度数据进行优化和校准后,仅对行人额温进行测量,保证测量精度误差在±0.3℃以内...

osc_wip0vvls
11分钟前
18
0
教你如何实现一个翻页笔插件?

前言 2020 年的第一篇文章,技术源于生活,作为码农,我觉得最得意的事情大概就是解决一个真实可见的问题了。前段时间我在团队做分享的时候,订了一个比较大的培训室,电脑离的远,所以就需要...

好未来技术团队
12分钟前
7
0
concurrentHashmap内容介绍

ConcurrentHashMap 的工作原理及代码实现   ConcurrentHashMap采用了非常精妙的"分段锁"策略,ConcurrentHashMap的主干是个Segment数组。Segment继承了ReentrantLock,所以它就是一种可重入...

osc_5emtajt2
12分钟前
6
0
hashMap在java7的介绍

1.Java:这是一份全面 & 详细的HashMap 1.7源码分析指南(转载) 前言 HashMap 在 Java 和 Android 开发中非常常见 今天,我将带来HashMap 的全部源码分析,希望你们会喜欢。 本文基于版本 ...

osc_5ijle82k
14分钟前
9
0
Modbus协议和应用开发介绍

因业务需要了解Modbus协议的使用,因此对Modbus的协议,以及相应的C#处理应用进行了解,针对协议的几种方式(RTU、ASCII、TCPIP)进行了封装,以及对Modbus的各种功能码的特点进行了详细的了...

osc_8i2fhl7z
14分钟前
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部