45

Firefox 有什么方法可以显示当前视口的尺寸吗？理想情况下，在状态栏中并在调整窗口大小时更新“实时”，因为这对于响应式布局测试非常有用！

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

4

6 回答 6

47

我知道这是一个 4 岁的答案，但我没有看到有人提到你只需要选择切换标尺选项。转到开发人员工具中的设置菜单选项并检查它。这将显示标尺图标，然后单击它，您就有了标尺。 在此处输入图像描述

于 2017-05-20T01:20:47.767 回答
21

流行的Web 开发人员扩展具有“在标题中显示窗口大小”功能（在“调整大小”菜单下），该功能在调整大小时会更新。这将以以下格式显示窗口大小和视口大小：1024x768 [1008x529]（窗口大小，视口大小）

于 2013-10-24T02:07:27.670 回答
16

我已经将这段 javascript（需要 jQuery）拼凑在一起，它很容易包含在内，但是将它作为一个插件输出到 FF 状态栏会很好。

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

$(document).ready(function(){
    var MEASUREMENTS_ID = 'measurements'; // abstracted-out for convenience in renaming
    $("body").append('<div id="'+MEASUREMENTS_ID+'"></div>');
    $("#"+MEASUREMENTS_ID).css({
        'position': 'fixed',
        'bottom': '0',
        'right': '0',
        'background-color': 'black',
        'color': 'white',
        'padding': '5px',
        'font-size': '10px',
        'opacity': '0.4'
    });
    getDimensions = function(){
        return $(window).width() + ' (' + $(document).width() + ') x ' + $(window).height() + ' (' + $(document).height() + ')';
    }
    $("#"+MEASUREMENTS_ID).text(getDimensions());
    $(window).on("resize", function(){
        $("#"+MEASUREMENTS_ID).text(getDimensions());
    });
});
于 2013-01-06T17:20:53.137 回答
14

在 Firefox 中，使用shift + f2打开开发人员工具栏

然后在命令中输入>> 标尺。

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

他们应该添加一个选项以使其永久化。

自 Firefox 40 起可用：https ://developer.mozilla.org/en-US/docs/Tools/Rulers

于 2015-10-22T20:54:39.710 回答
12

Firefox ctrl+shift+m​​ 中响应式设计视图的快捷方式就像我发现的这个目的的魅力。

于 2016-01-27T20:38:09.357 回答
2

我建议使用 2 个插件：

  1. 插件栏- 它基本上带回了 Firefox 窗口底部的旧插件栏。
  2. FireBreak：它在一个小框中显示窗口视口宽度，您可以将其放置在插件栏中。

我已将 FireBreak 文本框放在左下角的插件栏中，因此当您调整窗口大小时，您仍然可以看到它。相反，如果你把它放在默认的右上角，地址栏之后，一旦你将窗口调整到一定大小以下，它就会被隐藏。

要在处理响应式网站时从 Firefox 中获得更多信息，您甚至可以使用Tile Tabs 一个有用的用例是在处理代码时以不同大小打开 3-4 个图块，这样您就可以看到您的布局是如何进行的，并且，如果您使用 livereload，它将实时显示所有更改。

这是我的意思的屏幕截图：相同的网页以不同的磁贴打开，设置为不同的大小。要获得“Web Deleoper Tools”插件所需的每个图块的大小。

在此处输入图像描述

于 2015-07-11T14:58:15.273 回答