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

window.innerWidth, window.innerHeight

给出正确的测量值。即使它删除了滚动条的额外空间，我们也不必担心调整空间：）

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

为此，请使用：window.innerWidth和window.inerHeight财产（请参阅w3schools上的文档）。

在大多数情况下，这将是最好的方式，例如，显示一个完全居中的浮动模式对话框。它允许您计算窗口上的位置，无论使用浏览器的分辨率方向或窗口大小如何。

您可以使用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;

获取可用屏幕维度的非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

表示包装器的实际大小。

我写了一个小javascript bookmarklet，可以用来显示大小。您可以轻松地将其添加到浏览器中，无论何时单击它，您都会在浏览器窗口的右角看到其大小。

在这里您可以找到如何使用bookmarklet的信息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，当您调整窗口大小时，它会更新。