45

Firefox で現在のビューポートの寸法を表示する方法はありますか? 理想的には、ステータス バーで、ウィンドウのサイズを変更すると「ライブ」に更新されます。これは、レスポンシブ レイアウトのテストに非常に役立つためです。

私は「MeasureIt」を使用しましたが、定規で描画する必要があります。これは退屈で、ユーザーの能力とマウスの解像度によっては不正確になる可能性があります。

4

6 に答える 6

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

fire fox で、 shift + f2で開発者ツールバーを開きます

次に、コマンドに>> rulersと入力します。

ビューの端にルーラーが表示されます。タブ/画面ごと、および更新ごとにこれを行う必要がありますが、機能にアクセスするにはかなり高速です.

永続化するオプションを追加する必要があります。

Firefox 40 以降で利用可能: https://developer.mozilla.org/en-US/docs/Tools/Rulers

于 2015-10-22T20:54:39.710 に答える
2

2つのアドオンを使用することをお勧めします:

  1. アドオン バー- 基本的に、Firefox ウィンドウの下部にある古いアドオン バーを復活させます。
  2. FireBreak : アドオン バーに配置できる小さなボックスに、ウィンドウ ビューポートの幅が表示されます。

アドオン バー内の左下に FireBreak テキストボックスを配置したので、ウィンドウのサイズを変更しても、まだ表示できます。代わりに、デフォルトの右上、アドレスバーの後に配置すると、ウィンドウのサイズを特定のサイズ以下に変更するとすぐに非表示になります.

レスポンシブ Web サイトを扱うときに Firefox をもう少し活用するには、Tile Tabsを使用することもできます 。便利な使用例は、コードの作業中に 3 ～ 4 個のタイルをさまざまなサイズで開いて、レイアウトがどのように進んでいるかを確認できるようにすることです。 livereload を使用すると、すべての変更がリアルタイムで表示されます。

これが私が言いたいことのスクリーンショットです: 同じ Web ページが、異なるサイズに設定された異なるタイルで開かれています。各タイルのサイズを取得するには、「Web Deleoper Tools」アドオンが必要です。

ここに画像の説明を入力

于 2015-07-11T14:58:15.273 に答える