window.outerWidth獲取瀏覽器窗口外部的寬度。 它表示整個瀏覽器窗口的寬度，包括邊欄
window.innerWidth獲取瀏覽器可視區域的寬度，也就是頁面的寬度
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
var x = document.getElementById("demo");
x.innerHTML = "Browser inner window width: " + w + ", height: " + h + ".";
</script>
</body>
</html>
!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var w = window.outerWidth
var h = window.outerHeight
var x = document.getElementById("demo");
x.innerHTML = "Browser inner window width: " + w + ", height: " + h + ".";
</script>
</body>
</html>由於IE6獲取可視區域大小的屬性與其他瀏覽器不兼容 我們有必要些一個兼容所有瀏覽器的函數
var pageWidth = window.innerWidth;
var pageHeight = window.innerHeight;
if(typeof pageWidth != "number"){
if(document.compatMode == "CSS1Compat"){
pageWidth = document.documentElement.clientWidth;
pageHeight = document.document.documentElement.clientHeight;
}else{
pageWidth = document.body.clientWidth;
pageHeight = document.body.clientHeight;
}
}