                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JavaScript进阶篇

浏览器窗口的可视区域大小指的是哪里？

吾爱吾师

2015-12-11

源自：JavaScript进阶篇 9-18

关注问题我要回答

12226

操作

收起

2 回答

迷途的马尔斯
2015-12-11

直白一点：浏览器可视区域即网页的body的大小 ->你能看到的网页背景的大小

1 回复有任何疑惑可以回复我~

收起回答

geeker109

错了，浏览器可视区域不是网页的body的大小。可视区指的是浏览器减去上面菜单栏，下面状态栏和任务栏，右边滚动条（如果有的话）后的中间网页内容的单页面积大小。而body大小是随着内容调整而变动的，可大可小。如果有滚动条的话，body的要大于可视区。

2016-04-21 回复有任何疑惑可以回复我~

星雨星辰

在浏览器默认的情况下，body有8-10px左右的边距，而可见区域包括了这个边距，因此如果我们用到body{padding:0;margin:0;}来消除这种默认的情况。那么document.body.clientWidth和document.documentElement.clientWidth 的值就会相同。

2017-05-09 回复有任何疑惑可以回复我~

weixin_慕设计3230712 回复 geeker109

你好，这个单页的意思是指？假如你页面是左边有导航页，这个单页是会包括它还是不包括呢？

2021-08-17 回复有任何疑惑可以回复我~

慕男婶
2015-12-11

可视区域就是：你可以看到的区域。

浏览器窗口显示网页的部分（即不包括地址栏、工具栏）就是可视区。。

你可以用鼠标来推动浏览器窗口来改变大小，此时可视区的大小也是跟着变的。。

下面送一份我总结的与可视区宽高有关的笔记

各种宽度和高度

      a、可视区的真实宽度和高度
          document.documentElement.clientWidth 
          document.documentElement.clientHeight

          都去掉滚动条的大小（一般是17像素），比如我的dell笔记本在chrome下，
          正常的可视区（即无滚动条）大小是1366*663，假如水平和垂直方向都有滚动条的话，这两个值
          的大小为 1349 * 646
      b、
         document.documentElement.offsetWidth   无滚动条 1366  有滚动条 1349 同a
         document.documentElement.offsetHeight  根据实际的html元素被撑开的大小

      c、
         window.innerWidth / window.innerHeight 
           （1）有滚动条 document.documentElement.clientWidth + 滚动条宽度
           （2）无滚动条 等于document.documentElement.clientWidth
                高度计算规则同宽度

1 回复有任何疑惑可以回复我~

收起回答