与屏幕尺寸相关的完整指南

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)

获取可用屏幕维度的非jQuery方法。window.screen.width/height已经发布，但为了响应Web设计和完整性，我认为值得提及这些属性：

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

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

availWidth和availHeight-屏幕（不包括OS任务栏等）。

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

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

表示包装器的实际大小。

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

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

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

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

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

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