javascript獲取瀏覽器寬度和高度
阿新 • • 發佈：2019-01-25
測試瀏覽器及版本：IE8、FF5、Chrome12
螢幕解析度：1366 x 768
1.獲取螢幕解析度（所有瀏覽器一致）：
螢幕橫向解析度：window.screen.width 1366
螢幕縱向解析度：window.screen.height 768
2.網頁可見區域寬度和高度
寬度：document.body.clientWidth
高度：document.body.clientHeight
有文件宣告時：寬度為網頁可見區域高度，高度可能小於可見區高度
無文件宣告時：寬度為網頁可見區域高度，高度大於等於可見區高度
3.螢幕可用工作區域寬度和高度
寬度：window.screen.availWidth 螢幕橫向解析度-工作列寬度（如果工作列在左側或右側）
高度：window.screen.availHeight 螢幕縱向解析度-工作列高度（如果工作列在頂部或底部）
4網頁正文寬度和高度
寬度：document.body.scrollWidth
高度：document.body.scrollHeight
有文件宣告：IE8和FF5高度可能小於可見區域高度，Chrome12大於等於可見區域高度
無文件宣告：IE8高度可能小於可見區域高度，FF5和Chrome12大於等於可見區域高度
5.網頁可見區域寬度和高度（包括邊線)
寬度：document.body.offsetWidth
高度：document.body.offsetHeight
有文件宣告：全部可能小於可見區域高
無文件宣告：FF5高度可能小於可見區域高度，IE8和Chrome12大於等於可見區域高度
有文件宣告的測試程式碼：
Html程式碼
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type"content="text/html; charset=utf-8" />
- <title>測試1</title>
- <script type="text/javascript">
- function show(){
- var s = "";
- s += "網頁可見區域寬度："+document.body.clientWidth;
- s += "\n網頁可見區域高度："+document.body.clientHeight;
- s += "\n網頁可見區域寬度（包括邊線）："+document.body.offsetWidth;
- s += "\n網頁可見區域高度（包括邊線）："+document.body.offsetHeight;
- s += "\n網頁正文寬度："+document.body.scrollWidth;
- s += "\n網頁正文高度："+document.body.scrollHeight;
- s += "\n螢幕可用工作區域寬度："+window.screen.availWidth;
- s += "\n螢幕可用工作區域高度："+window.screen.availHeight;
- s += "\n螢幕解析度寬度："+window.screen.width;
- s += "\n螢幕解析度高度："+window.screen.height;
- alert(s);
- }
- </script>
- </head>
- <body style="margin:0;border:0">
- <div style="width:2000px;height:90px;margin:0">
- <a onclick="show()" href="#">點選</a>
- </div>
- </body>
- </html>
無文件宣告的測試程式碼
Html程式碼
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>測試2</title>
- <script type="text/javascript">
- function show(){
- var s = "";
- s += "網頁可見區域寬度："+document.body.clientWidth;
- s += "\n網頁可見區域高度："+document.body.clientHeight;
- s += "\n網頁可見區域寬度（包括邊線）："+document.body.offsetWidth;
- s += "\n網頁可見區域高度（包括邊線）："+document.body.offsetHeight;
- s += "\n網頁正文寬度："+document.body.scrollWidth;
- s += "\n網頁正文高度："+document.body.scrollHeight;
- s += "\n螢幕可用工作區域寬度："+window.screen.availWidth;
- s += "\n螢幕可用工作區域高度："+window.screen.availHeight;
- s += "\n螢幕解析度寬度："+window.screen.width;
- s += "\n螢幕解析度高度："+window.screen.height;
- alert(s);
- }
- </script>
- </head>
- <body style="margin:0;border:0">
- <div style="width:2000px;height:90px;margin:0">
- <a onClick="show()" href="#">點選</a>
- </div>
- </body>
- </html>