Chrome开发工具-浏览器大小？

Question

我正在使用Chrome开发工具，并试图在px中获得浏览器宽度

Google最近推出了他们的开发工具的更新，在这些更新之前，当缩放开发工具时，屏幕的高度和宽度曾经出现在网站预览的右上角，但是现在没有办法找出屏幕大小(例如下面的例子)。

​

​

现在如何通过Chrome工具了解浏览器的大小？

Answer 1

它们改变了显示此工具的方式，您可以发现它在设备模式下按下。

​

​

Answer 2

我偶然发现这个，试图找出这一点，但无法找到设备模式，根据Danamorah的答案。所以我想我可以帮新手节省点时间，然后屏幕上点击图标，这样你就可以得到尺寸了。

首先，打开开发工具，然后在左上角你会看到一个图标，形状像一个小平板电脑和手机。单击此按钮，您可以使用像素计数调整度量值：

​

​

Answer 3

这是个bug：https://bugs.chromium.org/p/chromium/issues/detail?id=582421

分支已经修复了这个bug，该修复程序预计将添加到下一个稳定版本(Version50)中。

作为临时解决办法，您可以使用此书签：

javascript: (function() {
  var v = window,
    d = document;
  v.onresize = function() {
    var w = v.innerWidth ? v.innerWidth : d.documentElement.clientWidth,
      h = v.innerHeight ? v.innerHeight : d.documentElement.clientHeight,
      s = d.getElementById('WSzPlgIn'),
      ss;
    if (!s) {
      s = d.createElement('div');
      s.id = 'WSzPlgIn';
      d.body.appendChild(s);
      s.onclick = function() {
        s.parentNode.removeChild(s)
      };
      ss = s.style;
      ss.position = 'fixed';
      ss.top = 0;
      ss.right = 0;
      ss.backgroundColor = 'black';
      ss.opacity = '1';
      ss.color = 'white';
      ss.fontFamily = 'monospace';
      ss.fontSize = '10pt';
      ss.padding = '5px';
      ss.textAlign = 'right';
      ss.zIndex = '999999';
    }
    s.innerHTML = 'w ' + w + '<br />h ' + h;
  };
})();