这是我的解决方案！

//内部宽度常量screen_viewport_inner=（）=>{设w＝窗口，i=“内部”；if（！（窗口中的`innerWidth`））{i=“客户端”；w=document.documentElement | | document.body；}返回{width:w[`${i}宽度`]，高度：w[`${i}高度`]}};//外侧宽度常量screen_viewport_outer=（）=>{设w＝窗口，o=“外部”；if（！（窗口中的`outerWidth`））{o=“客户端”；w=document.documentElement | | document.body；}返回{width:w[`${o}宽度`]，高度：w[`${o}高度`]}};//样式常量console_color=`颜色：rgba（0255,0,0.7）；字体大小：1.5rem；边框：1px纯红色；`;//测试常量测试=（）=>{让i_obj=screen_viewport_inner（）；console.log（`%c screen_viewport_inner=\n`，console_color，JSON.stringfy（i_obj，null，4））；让o_obj=screen_viewport_out（）；console.log（`%c screen_viewport_outer=\n`，console_color，JSON.stringify（o_obj，null，4））；};//生命(() => {测试（）；})();

图形答案：(............)

如果您需要一个真正防弹的文档宽度和高度解决方案（图片中的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（）来解决这些问题。有关更多信息，请查看文档。

获取可用屏幕维度的非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任务栏等）。

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

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

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

我写了一个小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，当您调整窗口大小时，它会更新。