                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /JavaScript進(jìn)階篇

瀏覽器窗口的可視區(qū)域大小指的是哪里？

吾愛吾師

2015-12-11

源自：JavaScript進(jìn)階篇 9-18

關(guān)注問題我要回答

12694

操作

收起

2 回答

迷途的馬爾斯
2015-12-11

直白一點(diǎn)：瀏覽器可視區(qū)域即網(wǎng)頁的body的大小 ->你能看到的網(wǎng)頁背景的大小

1 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

#1

geeker109

錯(cuò)了，瀏覽器可視區(qū)域不是網(wǎng)頁的body的大小?？梢晠^(qū)指的是瀏覽器減去上面菜單欄，下面狀態(tài)欄和任務(wù)欄，右邊滾動(dòng)條（如果有的話）后的中間網(wǎng)頁內(nèi)容的單頁面積大小。而body大小是隨著內(nèi)容調(diào)整而變動(dòng)的，可大可小。如果有滾動(dòng)條的話，body的要大于可視區(qū)。

2016-04-21 回復(fù) 有任何疑惑可以回復(fù)我~

#2

星雨星辰

在瀏覽器默認(rèn)的情況下，body有8-10px左右的邊距，而可見區(qū)域包括了這個(gè)邊距，因此如果我們用到body{padding:0;margin:0;}來消除這種默認(rèn)的情況。那么document.body.clientWidth和document.documentElement.clientWidth 的值就會(huì)相同。

2017-05-09 回復(fù) 有任何疑惑可以回復(fù)我~

#3

weixin_慕設(shè)計(jì)3230712 回復(fù) geeker109

你好，這個(gè)單頁的意思是指？假如你頁面是左邊有導(dǎo)航頁，這個(gè)單頁是會(huì)包括它還是不包括呢？

2021-08-17 回復(fù) 有任何疑惑可以回復(fù)我~

慕男嬸
2015-12-11

可視區(qū)域就是：你可以看到的區(qū)域。

瀏覽器窗口顯示網(wǎng)頁的部分（即不包括地址欄、工具欄）就是可視區(qū)。。

你可以用鼠標(biāo)來推動(dòng)瀏覽器窗口來改變大小，此時(shí)可視區(qū)的大小也是跟著變的。。

下面送一份我總結(jié)的與可視區(qū)寬高有關(guān)的筆記

各種寬度和高度

??????a、可視區(qū)的真實(shí)寬度和高度
??????????document.documentElement.clientWidth?
??????????document.documentElement.clientHeight

??????????都去掉滾動(dòng)條的大?。ㄒ话闶?7像素），比如我的dell筆記本在chrome下，
??????????正常的可視區(qū)（即無滾動(dòng)條）大小是1366*663，假如水平和垂直方向都有滾動(dòng)條的話，這兩個(gè)值
??????????的大小為?1349?*?646
??????b、
?????????document.documentElement.offsetWidth???無滾動(dòng)條?1366??有滾動(dòng)條?1349?同a
?????????document.documentElement.offsetHeight??根據(jù)實(shí)際的html元素被撐開的大小

??????c、
?????????window.innerWidth?/?window.innerHeight?
???????????（1）有滾動(dòng)條?document.documentElement.clientWidth?+?滾動(dòng)條寬度
???????????（2）無滾動(dòng)條?等于document.documentElement.clientWidth
????????????????高度計(jì)算規(guī)則同寬度

1 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答