最近在看JavaScript紅皮書，其中關於BOM獲取瀏覽器視窗大小、瀏覽器視窗的位置總是容易混淆，所以就以此篇文章總結各自所求取的量以及區別。

瀏覽器視窗位置（screenLeft、screenTop、ScreenX、ScreenY、moveTo、moveBy）

顧名思義瀏覽器視窗位置就是瀏覽器相對於顯示屏螢幕的位置

screenLeft、screenTop------------Safari、Opera、Chrome、IE瀏覽器支援

screenX、screenY------------------Firefox支援（Safari、Chrome也支援但推薦使用上個方法；Opera禁用（兩種方法有資料偏差））

moveTo（x,y）---------將瀏覽器移動到座標（x,y）位置

moveBy（x,y）---------將瀏覽器X軸位置移動x個座標，Y軸移動y個座標

注意：move的兩種方法Opera、IE7+預設禁用，其他瀏覽器可能禁用，而且只能對最外層Window使用不能用於框架。

程式碼（跨瀏覽器）

<script>
        var leftPos=(typeof window.screenLeft=="number")?window.screenLeft:window.screenX;
        var topPos=(typeof window.screenTop=="number")?window.screenTop:window.screenY;
        console.log(leftPos,topPos); 
    </script>
 

檢視：

瀏覽器佔滿整個螢幕時位置資訊

Chrome、Firefox、Safari瀏覽器返回資料如下圖所示（0,0）

始終返回頁面中每個框架的top.screenX和top.screenY的值，即使在頁面由於設定了外邊距發生偏移的情況下，相對於window物件使用screenX和screenY每次也會返回相同的值。

IE、Opera瀏覽器返回資料如下圖所示（0，瀏覽器工具欄高度）

返回框架相對於螢幕邊界的精確座標。

瀏覽器視窗大小（innerHeight、innerWidth、outerHeight、outerWidth、resizeTo、resizeBy）

  outerHeight、outerWidth---------瀏覽器視窗的本身尺寸（最為層window及框架）---IE9+、Safari、Firefox

                                         ---------單個標籤頁對應的瀏覽器視窗---Opera

                                         ---------視口大小非瀏覽器視窗大小

innerHeight、innerWidth-----------容器中頁面檢視區的大小（減去邊框寬度）

resizeTo(x,y)--------------------------調整瀏覽器視窗的大小為寬X，高為Y

resizeBy(x,y)-------------------------調整瀏覽器視窗的寬為原始寬+X，高為原始高+Y

注意：resize的兩種方法Opera、IE7+預設禁用，其他瀏覽器可能禁用，而且只能對最外層Window使用不能用於框架。

程式碼（頁面視口大小）：

<script>
       var pageWidth=window.innerWidth;
       var pageHeight=window.innerHeight;
       var pageWidth1=window.outerWidth;
       var pageHeight1=window.outerHeight;
       if(typeof pageWidth!="number"){
           if(document.compatMode=="CSS1Compat"){
               pageWidth=document.documentElement.clientWidth;
               pageHeight=document.documentElement.clientHeight;
           }else{
               pageWidth=document.body.clientWidth;
               pageHeight=document.body.clientHeight;
           }
       };
       console.log(pageWidth,pageHeight,pageWidth1,pageHeight1);
    </script>

Chrome瀏覽器全屏且開啟控制檯時返回的資料：

對於移動裝置視口問題比較複雜，有非常多的場景，http://t.cn/zOZs0Tz有詳細對這個文章的解釋（英文版），點選中文版本檢視，做移動web開發推薦讀一下。

前端小白的進修之路，如有問題可留言指教。