關於js獲取屏幕高度和寬度（ window.document.body，window.screen）(PC端和移動端)

　　在使用JS的時候經常遇到的問題就是我需要獲取當前屏幕的寬度和高度。每每到這個時候不知道使用哪個：

widow.document.body.offsetWidth;
window.screen.availWidth;
window.screen.width;

一上圖（PC端）為例，

A區域 表示的網頁的區域（屏幕下面虛線地方表示的是網頁可以滑動的區域）：widow.document.body.offsetWidth*window.document.body.offsetHeight。

B區域 表示的是可用區域（有網上的叫做空白區域）也就是顯示的屏幕 除掉上面的工具欄（瀏覽器的標簽）和下面的工具欄（電腦的菜單）。注意的是滑動欄是屬於可用區域的：                        window.screen.availWidth*window.screen.availHeight。

C區域 表示的是顯示器的寬和高，也就是電腦的分辨率 ：window.screen.Width*window.screen.Height。

所以window.screen.Width= window.screen.availWidth

 

假如是移動設備，由於沒有顯示滑動條， 所以window.screen.Width= window.screen.availWidth=widow.document.body.offsetWidth，至於高度的話含義和電腦端是一樣的。

PS：若想是的頁面中的某個元素（Canvas之類的）匹配移動設備的屏幕高寬，可以使用以下代碼：

<meta name="viewport" content="width=device-width; initial-scale=1.0">
<meta name="viewport" content="height=device-height, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">