獲取屏幕，當前網頁和瀏覽器窗口的大小

如何獲取在全部主流瀏覽器中均可以使用的windowWidth ， windowHeight ， pageWidth ， pageHeight ， screenWidth ， screenHeight ， pageX ， pageY ， screenX和screenY ？

---

#1樓

這包含您須要瞭解的全部信息： 獲取視口/窗口大小

簡而言之：

var win = window,
    doc = document,
    docElem = doc.documentElement,
    body = doc.getElementsByTagName('body')[0],
    x = win.innerWidth || docElem.clientWidth || body.clientWidth,
    y = win.innerHeight|| docElem.clientHeight|| body.clientHeight;
alert(x + ' × ' + y);

小提琴

請中止編輯此答案。 如今已經由不一樣的人對其進行了20次編輯，以匹配他們的代碼格式首選項。 還指出了，若是您只想定位現代瀏覽器，則不須要這樣作-若是是這樣，則只須要如下內容：

const width  = window.innerWidth || document.documentElement.clientWidth || 
document.body.clientWidth,
const height = window.innerHeight|| document.documentElement.clientHeight|| 
document.body.clientHeight;

console.log(width, height);

---

#2樓

一種獲取可用屏幕尺寸的非jQuery方法。 window.screen.width/height已經設置好了，可是出於響應性網頁設計和完整性的考慮，我認爲值得一提的是這些屬性：

alert(window.screen.availWidth);
alert(window.screen.availHeight);

http://www.quirksmode.org/dom/w3c_cssom.html#t10 ：

availWidth和availHeight-屏幕上的可用寬度和高度（不包括OS任務欄等）。

---

#3樓

您還能夠獲取WINDOW的寬度和高度，避免使用瀏覽器工具欄和其餘東西。 這是瀏覽器窗口中實際可用的區域 。

爲此，請使用： window.innerWidth和window.innerHeight屬性（ 請參閱w3schools的文檔 ）。

例如，在大多數狀況下，這是顯示完美居中浮動模式對話框的最佳方法。 不管使用哪一種分辨率方向或窗口大小，均可以使用它來計算窗口的位置。

---

#4樓

這是使用純JavaScript的跨瀏覽器解決方案（ 源 ）：

var width = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var height = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

---

#5樓

有時您須要在調整窗口和內部內容的大小時看到寬度/高度的變化。

爲此，我編寫了一個小腳本，其中添加了一個對話框，該對話框能夠動態監視全部調整大小並當即進行更新。

它添加了具備固定位置和高z-index的有效HTML，可是足夠小，所以您能夠 ：

• 在實際站點上使用
• 用它來測試移動/響應視圖

通過測試：Chrome 40，IE11，但也極可能也能夠在其餘/舊版瀏覽器上工做... :)

function gebID(id){ return document.getElementById(id); }
  function gebTN(tagName, parentEl){ 
     if( typeof parentEl == "undefined" ) var parentEl = document;
     return parentEl.getElementsByTagName(tagName);
  }
  function setStyleToTags(parentEl, tagName, styleString){
    var tags = gebTN(tagName, parentEl);
    for( var i = 0; i<tags.length; i++ ) tags[i].setAttribute('style', styleString);
  }
  function testSizes(){
    gebID( 'screen.Width' ).innerHTML = screen.width;
    gebID( 'screen.Height' ).innerHTML = screen.height;

    gebID( 'window.Width' ).innerHTML = window.innerWidth;
    gebID( 'window.Height' ).innerHTML = window.innerHeight;

    gebID( 'documentElement.Width' ).innerHTML = document.documentElement.clientWidth;
    gebID( 'documentElement.Height' ).innerHTML = document.documentElement.clientHeight;

    gebID( 'body.Width' ).innerHTML = gebTN("body")[0].clientWidth;
    gebID( 'body.Height' ).innerHTML = gebTN("body")[0].clientHeight;  
  }

  var table = document.createElement('table');
  table.innerHTML = 
       "<tr><th>SOURCE</th><th>WIDTH</th><th>x</th><th>HEIGHT</th></tr>"
      +"<tr><td>screen</td><td id='screen.Width' /><td>x</td><td id='screen.Height' /></tr>"
      +"<tr><td>window</td><td id='window.Width' /><td>x</td><td id='window.Height' /></tr>"
      +"<tr><td>document<br>.documentElement</td><td id='documentElement.Width' /><td>x</td><td id='documentElement.Height' /></tr>"
      +"<tr><td>document.body</td><td id='body.Width' /><td>x</td><td id='body.Height' /></tr>"
  ;

  gebTN("body")[0].appendChild( table );

  table.setAttribute(
     'style',
     "border: 2px solid black !important; position: fixed !important;"
     +"left: 50% !important; top: 0px !important; padding:10px !important;"
     +"width: 150px !important; font-size:18px; !important"
     +"white-space: pre !important; font-family: monospace !important;"
     +"z-index: 9999 !important;background: white !important;"
  );
  setStyleToTags(table, "td", "color: black !important; border: none !important; padding: 5px !important; text-align:center !important;");
  setStyleToTags(table, "th", "color: black !important; border: none !important; padding: 5px !important; text-align:center !important;");

  table.style.setProperty( 'margin-left', '-'+( table.clientWidth / 2 )+'px' );

  setInterval( testSizes, 200 );

編輯：如今樣式僅適用於記錄器表元素-不適用於全部表-這也是一個無jQuery的解決方案:)