Question

最近我重新安装了我的电脑。完成后重新安装我注意到使用Inspect时，屏幕高度和页面宽度不再显示在右上角。

他们删除了它还是有秘密设置我还没找到？或者也许是一个bug？当我不得不让网站响应时，这让我的生活变得更加轻松。

Answer 1

显然，它已在最新的更新中删除，但是您可以通过按F12然后按Ctrl + Shift + M来访问切换设备模式。

如果您不喜欢这种方式，可以使用此示例基于javascript来告诉您窗口的当前宽度：

var onresize = function() 
{
   var width = window.innerWidth
   || document.documentElement.clientWidth
   || document.body.clientWidth;
   console.log(width);
}

按F12键，然后按Esc键查看控制台。

基于这个答案：https://stackoverflow.com/a/28241682/3399806

Answer 2

这绝对是他们删除的有用功能。幸运的是，您可以使用Chrome扩展程序来实现相同的功能：

在此处下载：Viewport Dimensions

安装后重新启动浏览器。享受！

Answer 3

我使用了一个我自己发现的巧妙小技巧。只需将光标放在检查器中的body节点上，以便在调整大小时不断突出显示。我真的希望他们重新整合这个功能。

这是一张澄清的图片：

Answer 4

截至2016年5月，Chrome再次拥有此功能。screen dimensions

Answer 5

我创建了一个Chrome扩展程序，以模仿右上角宽度为X的旧样式，对所有人都是免费的。这是指该插件的链接（FYI扩展程序无法在Chrome插件页面上运行，因此请不要担心）：https://chrome.google.com/webstore/detail/width-and-height-display/hhcddohiohbojnfdmfpbbhiaompeiemo?hl=en-US&gl=US

这是一个截图：

或者，我从上面拿了@Joefay和@ Micah（谢谢！）的答案，并在右上角做了一点视觉，这样你就不需要在弹出控制台之后让你的控制台保持打开状态。代码进入控制台。每次打开新窗口或刷新页面时都必须粘贴它。希望这会有所帮助。

var onresize = function() {
   var width = window.innerWidth
   || document.documentElement.clientWidth
   || document.body.clientWidth;
   var height = window.innerHeight
   || document.documentElement.clientHeight
   || document.body.clientHeight;
   var container = document.getElementById('heightAndWidth');
   container.innerHTML = width + ' x ' + height;
};

(function addHAndWElement() {
    var cssString = 'position:fixed;right:8px;top:8px;z-index:20000;background:rgba(0,0,0,0.6);color:#FFF;padding:4px;'
    var htmlDoc = document.getElementsByTagName('body');
    var newDiv = document.createElement('div');
    var divIdName = 'heightAndWidth';
    newDiv.setAttribute('id',divIdName);
    newDiv.style.cssText = cssString;
    htmlDoc[0].appendChild(newDiv);
    onresize();
})();

Answer 6

该功能未被删除，现在有不同的方式来访问它。

进入Chrome开发工具
切换设备视图（Command + Shift + M / Ctrl + Shift + M）

然后，在下拉菜单中选择“响应”选项

完成此操作后，您将能够一如既往地来回调整窗口的大小。

我希望这有帮助！

Answer 7

<强> TL; DR 确保从当前调整大小的选项卡中打开了开发者控制台。

对于很多人来说，这可能听起来像是：face-palm：但是我在多个开发人员控制台被打开时被绊倒了，但是当我调整窗口大小时没有看到窗口的尺寸，没有改变设置。

答案是我打开了两个Chrome标签页，每个标签页显然都有自己的开发者控制台。切换标签时不会切换。因此，我正在使用两个选项卡调整活动窗口的大小，但由于我打开控制台的选项卡未激活，我没有看到我的尺寸。

Answer 8

它可能会重新进入Chrome。如果您使用Chrome Canary，它仍具有相同的功能。

我正在运行版本52.0.2707.0 canary

https://www.google.com/chrome/browser/canary.html

使用Inspect检查页面时，Chrome不显示屏幕的宽度和高度

8 个答案: