web-dev-qa-db-de.com

Firefox-Erweiterung zur Anzeige der aktuellen Fenstergröße?

Kann jemand ein Firefox-Addon empfehlen, das die Abmessungen des aktuellen Ansichtsfensters anzeigt? Idealerweise in der Statusleiste und "live" aktualisieren, während Sie die Fenstergröße ändern - wäre äußerst nützlich für reaktionsschnelle Layout-Tests!

Ich habe „MeasureIt“ verwendet, aber das erfordert, dass Sie mit einem Lineal zu ziehen, was mühsam ist und möglicherweise ungenau abhängig von der Fähigkeit und Maus Auflösung des Benutzers.

28
Coder

Ich habe dieses JavaScript-Teil (das jQuery erfordert) gehackt, das leicht einzuschließen ist, aber es wäre schön, wenn dies als Addon in die FF-Statusleiste ausgegeben würde.

Ich nehme an der positiven Seite kann dies nun in verschiedenen Browsern verwendet werden!

$(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());
    });
});
16
Coder

Die beliebte Web Developer Extension hat eine Funktion "Fenstergröße in Titel anzeigen" (im Menü "Größe ändern"), die beim Ändern der Größe aktualisiert wird. Dies zeigt sowohl die Fenstergröße und die Darstellungsgröße in folgendem Format: 1024x768 [1008x529] (Fenstergröße, die Anzeigengröße)

21

Ich weiß, dass dies eine 4-jährige Antwort ist, aber ich sehe niemanden, der erwähnt, dass Sie nur die Option Lineale umschalten auswählen müssen. Gehen Sie auf die Einstellungen Menüoption in den Entwickler-Tools und überprüfen. Das wird das Lineal-Symbol bringen und einfach anklicken und Sie Ihre Herrscher haben. enter image description here

16
Marvel Moe

In Firefox öffnen Sie die Entwickler-Symbolleiste mit Shift + f2

Geben Sie dann >> Lineale in dem Befehl.

Es werden Lineale am Rand der Ansicht angezeigt. Sie werden es für jeden Reiter/Bildschirm zu tun haben, und nach jeder Aktualisierung aber ziemlich schnell den Zugriff auf die Funktionalität.

Sie sollten eine Option hinzufügen, um es dauerhaft zu machen.

Verfügbar seit Firefox 40: https://developer.mozilla.org/en-US/docs/Tools/Rulers

12
Leo Fisher

Die Tastenkombination für die reaktionsschnelle Entwurfsansicht in Firefox (Strg + Umschalt + M) funktioniert wie ein Zauber für diesen Zweck, den ich gefunden habe.

11
RP McMurphy

Ich schlage vor, 2 Addons zu verwenden:

  1. Die Addon-Leiste - Es wird im Grunde die alte Addon-Leiste am unteren Rand des Firefox-Fensters wiederhergestellt.
  2. FireBreak: Zeigt die Breite des Fensteransichtsfensters in einem kleinen Feld an, das Sie in der Addon-Leiste platzieren können.

Ich habe das FireBreak-Textfeld links unten in der Addon-Leiste platziert. Wenn Sie also die Größe des Fensters ändern, können Sie es weiterhin sehen. Wenn Sie es stattdessen rechts oben nach der Adressleiste platzieren, wird es ausgeblendet, sobald Sie die Größe der Fenster unter einer bestimmten Größe ändern.

Um beim Umgang mit reaktionsschnellen Websites ein bisschen mehr von Firefox zu bekommen, können Sie sogar Tile Tabs verwenden haben 3-4 Fliesen in verschiedenen Größen öffnen, während auf dem Code arbeiten, so können Sie sehen, wie Ihr Layout wird und, wenn Sie livereload wird es zeigt alle Änderungen in Echtzeit verwenden.

Hier ist ein Screenshot von dem, was ich meine: Die Web-Seite geöffnet in verschiedenen Fliese auf verschiedene Größen eingestellt. Um die Größe der einzelnen Kacheln zu ermitteln, benötigen Sie das Addon "Web Deleoper Tools".

enter image description here

2
Antonio Pantano