Firefox中显示当前窗口尺寸的方式？

Firefox中是否有任何方法显示当前视口的尺寸？理想情况下，在状态栏中，在调整窗口大小时更新“live”，因为这对于响应性布局测试非常有用

---

我使用了“MeasureIt”，但这需要你用尺子来绘制，这很繁琐，而且很可能不准确，这取决于用户的能力和鼠标分辨率。

我已经拼凑了这段javascript（需要jQuery），它很容易包含，但如果能将其作为一个插件输出到FF状态栏中，那就太好了

从好的方面来说，我想现在可以在不同的浏览器中使用它了

$（文档）.ready（函数（）{
var-MEASUREMENTS_ID='MEASUREMENTS'；//为了方便重命名而抽象出来
$（“正文”）。附加（“”）；
$（“#”+度量值_ID）.css({
'位置'：'固定'，
“底部”：“0”，
“右”：“0”，
“背景色”：“黑色”，
“颜色”：“白色”，
“padding”：“5px”，
“字体大小”：“10px”，
“不透明度”：“0.4”
});
getDimensions=函数（）{
返回$（window.width（）++'（'+$（document.width（）++'）x'+$（window.height（）++'（'+$（document.height（）++'）；
}
$（“#”+MEASUREMENTS_ID）.text（getDimensions（））；
$（窗口）.on（“调整大小”，函数（）{
$（“#”+MEASUREMENTS_ID）.text（getDimensions（））；
});
});

该流行软件有一个“在标题中显示窗口大小”功能（在“调整大小”菜单下），在调整大小时会更新。这将以以下格式显示窗口大小和视口大小：1024x768[1008x529]（窗口大小，视口大小）

我建议使用2个插件：

-它基本上恢复了firefox窗口底部的旧加载项栏

：它在一个小框中显示窗口视口宽度，您可以将其放置在加载项栏中

我已经把FireBreak文本框放在插件条的左下角，所以当你调整窗口大小时，你仍然可以看到它。相反，如果将其放置在地址栏后的默认右上角，则在将窗口调整到某个大小以下时，它将立即隐藏

在处理响应性强的网站时，为了从firefox中获得更多信息，您甚至可以使用 一个有用的用例是在处理代码时打开3-4个不同大小的平铺，这样您就可以看到布局的进展情况，如果您使用livereload，它将实时显示所有更改

这是我的意思的截图：相同的网页以不同的分幅打开，并设置为不同的大小。 要获得每个磁贴的大小，您需要“WebDeloperTools”插件

---

在fire fox中，使用shift+f2打开开发者工具栏

然后在命令中键入标尺

它将在视图的边缘显示标尺。您必须为每个选项卡/屏幕以及每次刷新后执行此操作，但访问功能的速度非常快

他们应该增加一个选项，使其永久化

---

从Firefox 40开始提供：

Firefox中响应式设计视图的快捷键ctrl+shift+m在这方面很有魅力。

我知道这是一个4年前的答案，但我没有看到任何人提到你只需选择切换标尺选项。转到“开发人员工具”中的“设置”菜单选项并选中它。这将显示标尺图标，只需单击它，您就有了标尺。

---

可以显示窗口大小和视口大小！：）另一个好的选择是“显示窗口大小”，它会显示一个包含该信息的小条，因为在较小的窗口大小上，标题末尾的大小可能会被截断。但这不是更新。它保持在启动时显示的相同值上。请参见“标尺”答案，您不必再安装任何东西来获取此信息。维度信息会附加到标题中，因此很难看到，因为由于标签宽度较窄，标题通常会被截断。我发现“自定义选项卡宽度”附加组件（在FF 49.0中仍然有效）有助于增加选项卡宽度。另外请注意，小条覆盖信息（通过“显示窗口大小”）在调整窗口大小期间不会动态更新，但标题栏信息（通过“在标题中显示窗口大小”）会动态更新。除了应使用Window.innerwidth而不是$（Window.width（）外，一切都很完美as window.innerWidth是一个与我们的媒体查询成线性比例的属性。这个想法很好，脚本显示了一些维度，但显然这些维度不是与@media查询对应的维度。因此，bhavya_w的评论可能是解决方案。添加z-index:10000以覆盖所有内容刷新页面时，标尺将消失。而且它没有给出精确的窗口（视口）尺寸-您必须仔细查看标尺。谢谢，在答案中添加了您的信息。快捷方式是Option-Command-m(⌥-⌘-m） 用于mac用户。它显示当前窗口尺寸。您的选项将更改进入此设计视图的窗口。