在某些情况下，与响应布局相关的$（document）.height（）可能会返回错误的数据，仅显示视图端口高度。例如，当某个div#wrapper的高度为100%时，该#wrappers可以被其内部的某个块拉伸。但它的高度仍将与视口高度相同。在这种情况下，您可以使用

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

表示包装器的实际大小。

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

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

用法：

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

用于全局文档。对于其他文档，例如在您有权访问的嵌入式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

高度：

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)

滑动分页

高度：

$(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_responsive_breakpoints

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

步骤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)

我开发了一个库来了解桌面和移动浏览器的真实视口大小，因为不同设备的视口大小不一致，无法依赖该帖子的所有答案（根据我对此所做的所有研究）：https://github.com/pyrsmk/W

这就是我如何在React JS项目中获得屏幕宽度的方法：

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

var screenWidth = window.screen.availWidth;

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

屏幕有效宽度