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

您可以使用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.avail height。

对于pageX和pageY变量，请使用window.screenX或Y。请注意，这是从非常左/最左/最上的屏幕开始的。因此，如果您有两个宽度为1920的屏幕，那么右屏幕左侧500px的窗口的X值将为2420（1920+500）。然而，screen.width/height显示当前屏幕的宽度或高度。

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

再次使用jQuery，为pageX和pageY值使用$（“html”）.offset（）.top和$（“html”）.ooffset（）.left。

这里是一个纯JavaScript的跨浏览器解决方案（源代码）：

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

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

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

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

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

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

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

var screenWidth = window.screen.availWidth;

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

屏幕有效宽度

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