☰

Wie kann ich eine bestimmte Breite für meinen Browser eingeben? Ich verwende Chrome und die Chrome Dev-Tools

tag-icon • tag-icon google-chrome google-chrome-devtools
Wie kann ich eine bestimmte Breite für meinen Browser eingeben? Ich verwende Chrome und die Chrome Dev-Tools

Ich möchte einen Breitenwert für die Bildschirmgröße eingeben, damit ich geeignete Unterbrechungspunkte setzen kann. Ich ertappe mich oft dabei, dass ich versuche, von einer Größe auf die nächste Pixelgröße zu gelangen. In Chrome funktioniert das nicht immer, da ich manchmal immer zwei Pixel auf einmal gehe. Gibt es eine Möglichkeit, die Breite auf eine bestimmte eingegebene Breite einzustellen?

Ich verwende Mac OS X. Diese Frage hat mit Entwicklertools zu tun, da ich wissen möchte, wie ich damit die Breite des Browserfensters über die Tastatur einstellen kann. Wenn ich die Breite zwischen dem Entwicklerbildschirm und der Seite mit der Maus anpasse, wird eine Zahl angezeigt, die die Breite und Höhe des Fensters angibt. Dies ist nützlich, wenn Haltepunkte verwendet werden, um reaktionsfähige Websites zu erstellen. Ich würde gerne wissen, wie ich dies mit meiner Tastatur machen kann, damit ich nicht meine Maus verwenden muss, um Punkt für Punkt Präzision zu erreichen.

Antwort1

Öffnen Sie in den Chrome Developer Tools die Konsole und wählen Sie dann die Registerkarte „Emulation“. Hier finden Sie „Gerät“, um aus einer Liste gängiger Geräte auszuwählen (z. B. ein iPhone; dadurch wird auch der an den Server gesendete Benutzeragent geändert), und Sie finden „Bildschirm“, um die Abmessungen manuell einzustellen.

Siehe auchMobile Emulationin der Chrome-Hilfe.

Antwort2

In Chrome gibt es eine Erweiterung namens „Web Developer Tools“. Diese Erweiterung verfügt über eine Funktion, mit der Sie die Größe des Browsers auf eine bestimmte HxB-Größe ändern können. Sie können sogar Ihre eigenen Größen festlegen.

(Ich bin nicht sicher, ob ich Links posten darf, daher werde ich davon Abstand nehmen).

Bearbeiten:

Danke, Will!

Hier ist der Link zum Autor der Erweiterung:http://chrispederick.com/work/web-developer/

Antwort3

Es gibt auch eine andere Erweiterung namens Window Resizer (https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh), das dasselbe tut wie das von @Marcelo erwähnte. Dies könnte für alle nützlich sein, die eine ältere Version von Chrome verwenden.

Antwort4

Alternativer Ansatz, der keine Plugins erfordert.

  1. Öffnen Sie die integrierten Chrome Developer Tools ( F12oder Ctrl + Shift + I)
  2. Wählen Sie die ConsoleRegisterkarte
  3. Geben Sie Folgendes ein, um ein neues Fenster mit der aktuellen URL zu öffnen (der nächste Schritt funktioniert nur bei Fenstern, die explizit als größenveränderbar geöffnet wurden) 
    let w = window.open(window.location, "dev resize", "resizable");

Sie können die Größe des neu geöffneten Fensters dann folgendermaßen ändern:

  1. Öffnen Sie die Chrome DevTools im neuen Fenster und geben Sie ein 
    window.resizeTo(window.outerWidth - 1, window.outerHeight);
  2. Kehren Sie zum ursprünglichen Fenster zurück und geben Sie ein 
    w.resizeTo(w.outerWidth - 1, w.outerHeight);

Wiederholen Sie den resizeToBefehl beliebig oft, um die Breite jedes Mal um 1 Pixel zu verringern.

Funktioniert auch in Firefox (und wahrscheinlich auch in Edge, aber nicht getestet)

Getestet in:

  • Chrome-Version111.0.5563.65
  • Firefox-Version 111.0 (ich denke, es ist reiner Zufall, dass die Versionsnummern bei Firefox und Chrome übereinstimmen)

verwandte Informationen