javascript
JS 获取浏览器窗口大小
JS 獲取瀏覽器窗口大小
<script>// 獲取窗口寬度if (windows.innerWidth) {winWidth = windows.innerWidth;} else if ((document.body) && (document.body.clientWidth)) {winWidth = document.body.clientWidth;}// 獲取窗口高度if (windows.innerHeight) {winHeight = windows.innerHeight;} else if ((document.body) && (document.body.clientHeight)) {winHeight = document.body.clientHeight;}// 通過深入 Document 內部對 body 進行檢測，獲取窗口大小if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth) {winHeight = document.documentElement.clientHeight;winWidth = document.documentElement.clientWidth;}</script>?window對象：
（1）innerHeight屬性：窗口中文檔顯示區域的高度，不包括菜單欄、工具欄等部分。該屬性可讀可寫。
???? ?IE不支持該屬性，IE中body元素的clientHeight屬性與該屬性相同。
（2)innerWidth屬性：窗口中文檔顯示區域的寬度，同樣不包括邊框。該屬性可讀可寫。
??? ??IE不支持該屬性，IE中body元素的clientWidth屬性與該屬性相同。
??? ??clientHeight與clientWidth屬性是只讀的。
???? ?另外，IE不支持outerWidth、outerHeight屬性。
?(3)pageXOffset屬性：整數只讀屬性，表示文檔向右滾動過的像素數。
?? ???IE不支持該屬性，使用body元素的scrollLeft屬性替代。
?(4)pageYOffset屬性：整數只讀屬性，表示文檔向下滾動過的像素數。
??? ??IE不支持該屬性，使用body元素的scrollTop屬性替代。
documentElement 和 body 相關說明：
body是DOM對象里的body子節點，即 <body> 標簽；documentElement 是整個節點樹的根節點root，即<html> 標簽；
兼容IE與DOM瀏覽器，如何獲取窗口中文檔顯示區域的寬度及高度，還可以使用?:條件語句，如下：
windows.innerWidth?? windows.innerWidth?: document.body.clientWidth;
windows.innerHeight?? windows.innerHeight?: document.body.clientHeight;
document.body.clientWidth 和 document.documentElement.clientWidth 在不同瀏覽器的差異：如果定義了W3C的標準
在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高）
?
網頁可見區域寬： 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;
?
IE：
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均無關)
?
假設 obj 為某個 HTML 控件：
obj.offsetTop 指 obj 相對于版面或由 offsetParent 屬性指定的父坐標的計算上側位置，整型，單位像素。
obj.offsetLeft 指 obj 相對于版面或由 offsetParent 屬性指定的父坐標的計算左側位置，整型，單位像素。
obj.offsetWidth 指 obj 控件自身的絕對寬度，不包括因 overflow 而未顯示的部分，也就是其實際占據的寬度，整型，單位像素。
obj.offsetHeight 指 obj 控件自身的絕對高度，不包括因 overflow 而未顯示的部分，也就是其實際占據的高度，整型，單位像素。
我們對前面提到的 offsetParent 作個說明。
offsetParent 獲取定義對象 offsetTop 和 offsetLeft 屬性的容器對象的引用。offsetTop 與 offsetParent 很復雜，不同瀏覽器有不同解釋，浮動一下解釋又不同了，所以我們一般只要理解通過二者可以獲得控件在瀏覽器中的絕對位置即可。
以上屬性在 FireFox 中也有效。
另外：我們這里所說的是指 HTML 控件的屬性值，并不是 document.body，document.body 的值在不同瀏覽器中有不同解釋（實際上大多數環境是由于對 document.body 解釋不同造成的，并不是由于對 offset 解釋不同造成的）
?
我們知道 offsetTop 可以獲得 HTML 元素距離上方或外層元素的位置，style.top 也是可以的，二者的區別是：
一、offsetTop 返回的是數字，而 style.top 返回的是字符串，除了數字外還帶有單位：px。
二、offsetTop 只讀，而 style.top 可讀寫。
三、如果沒有給 HTML 元素指定過 top 樣式，則 style.top 返回的是空字符串。
offsetLeft 與 style.left、offsetWidth 與 style.width、offsetHeight 與 style.height 也是同樣道理。
?
clientHeight
大家對 clientHeight 都沒有什么異議，都認為是內容可視區域的高度，也就是說頁面瀏覽器中可以看到內容的這個區域的高度，一般是最后一個工具條以下到狀態欄以上的這個區域，與頁面內容無關。
offsetHeight
IE、Opera 認為 offsetHeight = clientHeight + 滾動條 + 邊框。
NS、FF 認為 offsetHeight 是網頁內容實際高度，可以小于 clientHeight。
scrollHeight
IE、Opera 認為 scrollHeight 是網頁內容實際高度，可以小于 clientHeight。
NS、FF 認為 scrollHeight 是網頁內容高度，不過最小值是 clientHeight。
簡單地說，clientHeight 就是透過瀏覽器看內容的這個區域高度。
NS、FF 認為 offsetHeight 和 scrollHeight 都是網頁內容高度，只不過當網頁內容高度小于等于 clientHeight 時，scrollHeight 的值是 clientHeight，而 offsetHeight 可以小于 clientHeight。
IE、Opera 認為 offsetHeight 是可視區域?clientHeight 滾動條加邊框。scrollHeight 則是網頁內容實際高度。
同理：clientWidth、offsetWidth 和 scrollWidth 的解釋與上面相同，只是把高度換成寬度即可。
說明：以上基于 DTD HTML 4.01 Transitional，如果是 DTD XHTML 1.0 Transitional 則意義又會不同，在 XHTML 中這三個值都是同一個值，都表示內容的實際高度。新版本的瀏覽器大多支持根據頁面指定的 DOCTYPE 來啟用不同的解釋器
IE 和 FireFox 全面支持，而 Netscape 8?和 Opera 7.6?不支持 scrollTop、scrollLeft（document.body.scrollTop、document.body.scrollLeft 除外）。
?
1.clientHeight, clientWidth:
這兩個屬性大體上顯示了元素內容的象素高度和寬度.理論上說這些測量不考慮任何通過樣式表加入
元素中的頁邊距,邊框等.
2.clientLeft,clientTop:
這兩個返回的是元素周圍邊框的厚度,如果不指定一個邊框或者不定位改元素,他的值就是0.
3.scrollLeft,scrollTop:
如果元素是可以滾動的,可以通過這倆個屬性得到元素在水平和垂直方向上滾動了多遠,單位是象素.
對于不可以滾動的元素,這些值總是0.
4.scrollHeight,scrollWidth:
不管有多少對象在頁面上可見,他們得到的是整體.
5.style.left:
定位元素與包含它的矩形左邊界的偏移量
6.style.pixelLeft:
返回定位元素左邊界偏移量的整數像素值.因為屬性的非像素值返回的是包含單位的字符串,例如,30px. 利用這個屬性可以單獨處理以像素為單位的數值.
7.style:posLetf:
返回定位元素左邊界偏移量的數量值,不管相應的樣式表元素指定什么單位.因為屬性的非位置值返回的是包含單位的字符串,例如,1.2em??
??
LEFT:?? 為從左向右移的位置,即掛件距離屏幕左邊緣的距離;
clientLeft?? 返回對象的offsetLeft屬性值和到當前窗口左邊的真實值之間的距離
offsetLeft?? 返回對象相對于父級對象的布局或坐標的left值，就是以父級對象左上角為坐標原點，向右和向下為X、Y軸正方向的x坐標
pixelLeft?? 設置或返回對象相對于窗口左邊的位置
scrollWidth 是對象的實際內容的寬，不包邊線寬度，會隨對象中內容的多少改變（內容多了可能會改變對象的實際寬度）。
clientWidth 是對象可見的寬度，不包滾動條等邊線，會隨窗口的顯示大小改變。
offsetWidth 是對象的可見寬度，包滾動條等邊線，會隨窗口的顯示大小改變
?
轉載于:https://www.cnblogs.com/jiangtengteng/p/5368128.html
總結
以上是生活随笔為你收集整理的JS 获取浏览器窗口大小的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Docker：尝试篇
- 下一篇： SQL 关于apply的两种形式cros