我怎样才能得到windowWidth，windowHeight，pageWidth，pageHeight，screenWidth，screenHeight，pageX，pageY，screenX，screenY将在所有主要浏览器工作？

您可以使用jQuery获取窗口或文档的大小：

// Size of browser viewport.
$(window).height();
$(window).width();

// Size of HTML document (same as pageHeight/pageWidth in screenshot).
$(document).height();
$(document).width();

对于屏幕大小，您可以使用screen对象：

window.screen.height;
window.screen.width;

这包含您需要了解的所有信息：获取视口/窗口大小

简而言之：

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);

小提琴

请停止编辑此答案。现在已经由不同的人对其进行了22次编辑，以匹配他们的代码格式首选项。还指出了，如果您只想定位现代浏览器，则不需要这样做-如果是这样，则只需要以下内容：

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

console.log(width, height);

这是使用纯JavaScript的跨浏览器解决方案（源）：

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

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

一种获取可用屏幕尺寸的非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任务栏等）。

但是，当我们谈论响应式屏幕时，如果出于某种原因要使用jQuery处理响应式屏幕，

window.innerWidth, window.innerHeight

给出正确的测量。即使它消除了滚动条的多余空间，我们也不必担心调整该空间:)

您还可以获取WINDOW的宽度和高度，避免使用浏览器工具栏和其他东西。这是浏览器窗口中实际可用的区域。

为此，请使用： window.innerWidth 和 window.innerHeight属性（请参阅w3schools的文档）。

例如，在大多数情况下，这是显示完美居中浮动模式对话框的最佳方法。无论使用哪种分辨率方向或窗口大小，都可以使用它来计算窗口的位置。

function wndsize(){
  var w = 0;var h = 0;
  //IE
  if(!window.innerWidth){
    if(!(document.documentElement.clientWidth == 0)){
      //strict mode
      w = document.documentElement.clientWidth;h = document.documentElement.clientHeight;
    } else{
      //quirks mode
      w = document.body.clientWidth;h = document.body.clientHeight;
    }
  } else {
    //w3c
    w = window.innerWidth;h = window.innerHeight;
  }
  return {width:w,height:h};
}
function wndcent(){
  var hWnd = (arguments[0] != null) ? arguments[0] : {width:0,height:0};
  var _x = 0;var _y = 0;var offsetX = 0;var offsetY = 0;
  //IE
  if(!window.pageYOffset){
    //strict mode
    if(!(document.documentElement.scrollTop == 0)){offsetY = document.documentElement.scrollTop;offsetX = document.documentElement.scrollLeft;}
    //quirks mode
    else{offsetY = document.body.scrollTop;offsetX = document.body.scrollLeft;}}
    //w3c
    else{offsetX = window.pageXOffset;offsetY = window.pageYOffset;}_x = ((wndsize().width-hWnd.width)/2)+offsetX;_y = ((wndsize().height-hWnd.height)/2)+offsetY;
    return{x:_x,y:_y};
}
var center = wndcent({width:350,height:350});
document.write(center.x+';<br>');
document.write(center.y+';<br>');
document.write('<DIV align="center" id="rich_ad" style="Z-INDEX: 10; left:'+center.x+'px;WIDTH: 350px; POSITION: absolute; TOP: '+center.y+'px; HEIGHT: 350px"><!--К сожалению, у Вас не установлен flash плеер.--></div>');

要使用“控制台”或单击“检查”后，检查任何网站当前加载页面的高度和宽度。

步骤1：单击鼠标右键，然后单击“检查”，然后单击“控制台”

第2步：确保浏览器屏幕不处于“最大化”模式。如果浏览器屏幕处于“最大化”模式，则需要先单击最大化按钮（位于右上角或左上角），然后取消最大化。

步骤3：现在，在大号（'>'）之后写以下内容，即

       > window.innerWidth
            output : your present window width in px (say 749)

       > window.innerHeight
            output : your present window height in px (say 359)

如果您需要一个真正的防弹解决方案来处理文档的宽度和高度（图中的pageWidth和pageHeight），则可以考虑使用我的插件jQuery.documentSize。

它只有一个目的：始终返回正确的文档大小，即使在jQuery和其他方法失败的情况下也是如此。尽管有它的名字，但您不必一定要使用jQuery –它是用普通Javascript编写的，也可以不使用jQuery而工作。

用法：

var w = $.documentWidth(),
    h = $.documentHeight();

为了全球document。对于其他文档，例如在您可以访问的嵌入式iframe中，请将文档作为参数传递：

var w = $.documentWidth( myIframe.contentDocument ),
    h = $.documentHeight( myIframe.contentDocument );

更新：现在也适用于窗口尺寸

从1.1.0版开始，jQuery.documentSize还处理窗口尺寸。

这是必要的，因为

• $( window ).height()在iOS中是越野车，甚至毫无用处
• $( window ).width()并且$( window ).height()是在移动不可靠的，因为他们不处理移动变焦的效果。

jQuery.documentSize提供$.windowWidth()和$.windowHeight()解决了这些问题。有关更多信息，请查阅文档。

我写了一个小的javascript小书签，可以用来显示其大小。您可以轻松地将其添加到浏览器中，每当单击它时，您将在浏览器窗口的右上角看到该大小。

在这里，您可以找到有关如何使用书签的信息 https://en.wikipedia.org/wiki/Bookmarklet

书签

javascript:(function(){!function(){var i,n,e;return n=function(){var n,e,t;return t="background-color:azure; padding:1rem; position:fixed; right: 0; z-index:9999; font-size: 1.2rem;",n=i('<div style="'+t+'"></div>'),e=function(){return'<p style="margin:0;">width: '+i(window).width()+" height: "+i(window).height()+"</p>"},n.html(e()),i("body").prepend(n),i(window).resize(function(){n.html(e())})},(i=window.jQuery)?(i=window.jQuery,n()):(e=document.createElement("script"),e.src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js",e.onload=n,document.body.appendChild(e))}()}).call(this);

原始码

原始代码在咖啡中：

(->
  addWindowSize = ()->
    style = 'background-color:azure; padding:1rem; position:fixed; right: 0; z-index:9999; font-size: 1.2rem;'
    $windowSize = $('<div style="' + style + '"></div>')

    getWindowSize = ->
      '<p style="margin:0;">width: ' + $(window).width() + ' height: ' + $(window).height() + '</p>'

    $windowSize.html getWindowSize()
    $('body').prepend $windowSize
    $(window).resize ->
      $windowSize.html getWindowSize()
      return

  if !($ = window.jQuery)
    # typeof jQuery=='undefined' works too
    script = document.createElement('script')
    script.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'
    script.onload = addWindowSize
    document.body.appendChild script
  else
    $ = window.jQuery
    addWindowSize()
)()

基本上，代码前面是一个小div，当您调整窗口大小时会更新。

在某些情况下，与响应式布局相关的$(document).height()返回错误数据只能显示视口高度。例如，当某个div＃wrapper的height：100％时，该#wrapper可以被其中的某个块拉伸。但是它的高度仍然会像视口高度一样。在这种情况下，您可能会使用

$('#wrapper').get(0).scrollHeight

那代表包装的实际大小。

有关屏幕尺寸的完整指南

的JavaScript

对于身高：

document.body.clientHeight  // Inner height of the HTML document body, including padding 
                            // but not the horizontal scrollbar height, border, or margin

screen.height               // Device screen height (i.e. all physically visible stuff)
screen.availHeight          // Device screen height minus the operating system taskbar (if present)
window.innerHeight          // The current document's viewport height, minus taskbars, etc.
window.outerHeight          // Height the current window visibly takes up on screen 
                            // (including taskbars, menus, etc.)

注意：当窗口最大化时，它将等于screen.availHeight

对于宽度：

document.body.clientWidth   // Full width of the HTML page as coded, minus the vertical scroll bar
screen.width                // Device screen width (i.e. all physically visible stuff)
screen.availWidth           // Device screen width, minus the operating system taskbar (if present)
window.innerWidth           // The browser viewport width (including vertical scroll bar, includes padding but not border or margin)
window.outerWidth           // The outer window width (including vertical scroll bar,
                            // toolbars, etc., includes padding and border but not margin)

jQuery的

对于身高：

$(document).height()    // Full height of the HTML page, including content you have to 
                        // scroll to see

$(window).height()      // The current document's viewport height, minus taskbars, etc.
$(window).innerHeight() // The current document's viewport height, minus taskbars, etc.
$(window).outerHeight() // The current document's viewport height, minus taskbars, etc.                         

对于宽度：

$(document).width()     // The browser viewport width, minus the vertical scroll bar
$(window).width()       // The browser viewport width (minus the vertical scroll bar)
$(window).innerWidth()  // The browser viewport width (minus the vertical scroll bar)
$(window).outerWidth()  // The browser viewport width (minus the vertical scroll bar)

参考：https : //help.optimizely.com/Build_Campaigns_and_Experiments/Use_screen_measurements_to_design_for_sensitive_breakpoints

我开发了一个库，用于了解台式机和移动设备浏览器的实际视口大小，因为视口大小在设备之间不一致，并且不能依赖该帖子的所有答案（根据我对此所做的所有研究）：https：// github .com / pyrsmk / W

有时您需要在调整窗口和内部内容的大小时看到宽度/高度的变化。

为此，我编写了一个小脚本，其中添加了一个对话框，该对话框可以动态监视所有调整大小并立即进行更新。

它添加了具有固定位置和高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的解决方案:)

随着引进globalThis的ES2020，你可以用这样的属性。

对于屏幕尺寸：

globalThis.screen.availWidth 
globalThis.screen.availHeight

对于窗口大小

globalThis.outerWidth
globalThis.outerHeight

对于偏移：

globalThis.pageXOffset
globalThis.pageYOffset

...等等。

alert("Screen Width: "+ globalThis.screen.availWidth +"\nScreen Height: "+ globalThis.screen.availHeight)

您可以使用Screen对象来获取此信息。

以下是返回的示例：

Screen {
    availWidth: 1920,
    availHeight: 1040,
    width: 1920,
    height: 1080,
    colorDepth: 24,
    pixelDepth: 24,
    top: 414,
    left: 1920,
    availTop: 414,
    availLeft: 1920
}

要获取screenWidth变量，只需使用screen.width，与screenHeight只需使用即可screen.height。

要获取窗口的宽度和高度，分别为screen.availWidth或screen.availHeight。

对于pageX和pageY变量，请使用window.screenX or Y。请注意，这是从“最左/最上层”屏幕的“最上层/最上层”获得的。因此，如果您有两个宽度相同的屏幕，1920那么距离右侧屏幕左侧500px的窗口的X值为2420（1920 + 500）。screen.width/height但是，显示CURRENT屏幕的宽度或高度。

要获取页面的宽度和高度，请使用jQuery $(window).height()或$(window).width()。

再次使用jQuery，将$("html").offset().top和$("html").offset().left用于pageX和pageY值。

这是我的解决方案！

// innerWidth
const screen_viewport_inner = () => {
    let w = window,
        i = `inner`;
    if (!(`innerWidth` in window)) {
        i = `client`;
        w = document.documentElement || document.body;
    }
    return {
        width: w[`${i}Width`],
        height: w[`${i}Height`]
    }
};


// outerWidth
const screen_viewport_outer = () => {
    let w = window,
        o = `outer`;
    if (!(`outerWidth` in window)) {
        o = `client`;
        w = document.documentElement || document.body;
    }
    return {
        width: w[`${o}Width`],
        height: w[`${o}Height`]
    }
};

// style
const console_color = `
    color: rgba(0,255,0,0.7);
    font-size: 1.5rem;
    border: 1px solid red;
`;



// testing
const test = () => {
    let i_obj = screen_viewport_inner();
    console.log(`%c screen_viewport_inner = \n`, console_color, JSON.stringify(i_obj, null, 4));
    let o_obj = screen_viewport_outer();
    console.log(`%c screen_viewport_outer = \n`, console_color, JSON.stringify(o_obj, null, 4));
};

// IIFE
(() => {
    test();
})();

这是我如何在React JS Project中获取屏幕宽度的方法：

如果宽度等于1680，则返回570，否则返回200

var screenWidth = window.screen.availWidth;

<Label style={{ width: screenWidth == "1680" ? 570 : 200, color: "transparent" }}>a  </Label>

Screen.availWidth