最近我重新安装了我的电脑。完成重新安装后，我在使用 Inspect 时注意到页面的屏幕高度和宽度不再显示在右上角。
是他们删除了它还是我还没有找到一个秘密设置？或者可能是一个错误？当我必须使网站具有响应性时，这让我的生活变得更加轻松。
【问题讨论】：
标签： google-chrome browser google-chrome-devtools
TL;DR 确保从您当前正在调整大小的选项卡中打开了开发者控制台。
对于很多人来说，这听起来像是一个 :face-palm: ，但我在打开多个开发者控制台时被绊倒了，但在我调整它的大小时看不到窗口的尺寸，也没有更改设置。
答案是我打开了两个 Chrome 标签页，每个标签页显然都有自己的开发者控制台。切换标签时它不会切换。因此，我使用两个选项卡调整活动窗口的大小，但由于我打开控制台的选项卡未激活，我看不到我的尺寸。
【讨论】：
自 2016 年 5 月起，Chrome 再次拥有此功能。screen dimensions
【讨论】：
【讨论】：
它可能会在 Chrome 中运行。如果您使用 Chrome Canary，它仍然具有相同的功能。
我正在运行版本 52.0.2707.0 金丝雀
【讨论】：
我创建了一个 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();
})();
【讨论】：
显然它已在最新更新之一中删除，但是您可以通过按 F12 然后按 Ctrl + Shift + M 来访问切换设备模式。
如果你不喜欢这种方式，你可以使用这个基于javascript的例子，它会告诉你当前窗口的宽度：
var onresize = function()
{
var width = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
console.log(width);
}
按 F12，然后按 Esc 键查看控制台。
【讨论】：