Was ist der beste Weg, um eine Webseite mit einer höheren Auflösung als der aktuellen Bildschirmauflösung zu testen?

10

Ich erstelle eine reaktionsschnelle Website, auf der ich das CSS-, HTML- und Javascript-Rendering meiner Webseite mit einer Auflösung von 2400 Pixel testen muss, während mein Bildschirm nur 1900 Pixel groß ist.

windows display resolution website Metallgetriebe solide
quelle
mögliches Duplikat von Wie können Sie einen Screenshot einer gesamten Webseite machen?
Ƭᴇcʜιᴇ007
Sie wissen, dass Sie die Größe von Browserfenstern auf den meisten Systemen über Ihre Bildschirmauflösung hinaus ändern können? Bewegen Sie sie einfach zur Hälfte aus dem Bildschirm heraus und ändern Sie die Größe des Rahmens, der sich jetzt in der Mitte des Bildschirms befindet. Es ist für den tatsächlichen Gebrauch nutzlos, reicht aber zum Testen aus. Dieser Screenshot des gesamten Fensters wurde unter OS X mit einer Bildschirmauflösung von 1680 x 150 aufgenommen.
Daniel Beck
@ DanielBeck - seltsam, ich versuche das gleiche auf meinem Chomre (Windows), aber es erstreckt sich nicht über meinen aktuellen Bildschirm hinaus
Metal Gear Solid
Es ist wirklich ein Problem mit Ihrem Betriebssystem, Sie dann zu überlisten . Konnte mit Safari unter Windows 7 reproduzieren.
Daniel Beck
Meins ist auch Windows 7
Metallgetriebe solide

Antworten:

3

Im Chrome-Browser:

  1. Drücken Sie F12. Dadurch werden DevTools geöffnet.

  2. Klicken Sie auf ein Einstellungssymbol in der unteren rechten Ecke. Dadurch werden die DevTools-Einstellungen geöffnet.

  3. Gehen Sie im linken Menü zu Überschreibungen.

  4. Aktivieren Sie Aktivierungs- und Gerätemetriken.

  5. Geben Sie die Bildschirmauflösung ein

Ich benutze es immer, es ist wirklich praktisch.

Arman Bimatov
quelle
2

Wenn Sie in neueren Versionen von Firefox auf Ctrl+ Shift+ Mklicken, rufen Sie die Responsive Design-Ansicht auf , mit der die Größe des Browser-Ansichtsfensters so geändert werden kann, dass sie größer als die tatsächliche Bildschirmgröße ist. Sie können auch Screenshots machen und Berührungsereignisse ab FF 26 simulieren.

Screenshot von RDV
Klicken Sie für die volle Größe

Möglicherweise fällt es Ihnen leichter, die Größe zu ändern, nachdem Sie das Fenster verkleinert haben. Sie können die Größen auf einmal weiter ziehen. Oder geben Sie einfach eine benutzerdefinierte Voreinstellung aus der Dropdown-Liste ein.

Bob
quelle
Gibt es eine API für diese Option? Um es über js Code zu aktivieren, der entweder von der Website oder aus einem Addon heraus injiziert wurde?
Kamal Reddy
@KamalReddy Ich glaube nicht, dass Sie dies im Inhaltskontext (Website) tun können, aber es sollte im Chrome-Kontext (Addon) möglich sein. Na ja, in Zukunft sowieso. Vielleicht können Sie Strg + Umschalt + M simulieren?
Bob
1

Sie können diese Website ausprobieren , um Ihre Webseite mit einer beliebigen Bildschirmauflösung zu testen, mit der Sie aus einer voreingestellten Auflösung auswählen oder Ihre benutzerdefinierte Auflösung eingeben können. Ich hoffe, Sie finden diese Zeilen hilfreich.

Kamalam
quelle
Von unserem Proxyserver blockiert werden. Ist das ein Zeiger auf eine andere Site oder ist diese PHP-Seite die eigentliche Seite des Tools?
Kanadier Luke
Die PHP-Seite, die ich hier hinzugefügt habe, ist die eigentliche Seite des Tools
Kamalam
0

Diese Frage ist wahrscheinlich eher für Webmaster geeignet, aber ich werde es versuchen und ViewLikeUs vorschlagen, die

Hier können Sie überprüfen, wie Ihre Website in den beliebtesten Auflösungsformaten aussieht.

CharlieRB
quelle
1
es hat nur 1920 max
Metallgetriebe solide
0

Fügen Sie im Bedienfeld Ihrer Grafikkarte eine benutzerdefinierte Bildschirmauflösung hinzu.

GENiEBEN
quelle
3
Auflösungen größer als vom Bildschirm unterstützt? Können Sie weitere Details zur Konfiguration und zum Aussehen angeben?
Daniel Beck
@DanielBeck Dieser YouTube-Tutorial- Link ist für nVidia-Karten. Ziemlich ähnlich für ATI / AMD.
GENiEBEN
2
@ElGenieben Dieses Video warnt ausdrücklich um 0:39, dass Sie Ihr Display beschädigen könnten, wenn Sie eine zu hohe Auflösung einstellen.
Nicole Hamilton
0

Sie können das Addon für Chrome: Resolution Tester ausprobieren , das benutzerdefinierte Auflösungen unterstützt :)

Skuli Axelson
quelle
0

Ändern Sie einfach den Zoom in Ihrem Browser. Wenn Sie herauszoomen, meldet Ihre Fenstergröße Ihrer Anwendung im Wesentlichen eine immer größere Breite.

Beispiel jsfiddle hier , klicken Sie einfach auf die Schaltfläche, sehen Sie die Breite, die gemeldet wird, zoomen Sie dann ein wenig heraus und klicken Sie auf dieselbe Schaltfläche - es wird eine größere Größe gemeldet.

Doobeh
quelle
0

Probieren Sie die benutzerdefinierten Auflösungseinstellungen im Geräteemulator in Google Chrome aus. Sie haben mehr Kontrolle als mit der Zoomfunktion des Browsers.

Aktivieren Sie den Geräteemulator und aktivieren Sie die Option "Anpassen zoomen".

Geben Sie Auflösungen mit einer Breite von bis zu 9999 Pixel manuell ein (oder ziehen Sie die Ränder des emulierten Bildschirms. Die emulierte Auflösung wird so skaliert, dass sie in Ihr eigenes Ansichtsfenster passt.

Sie können die Auflösungshöhe tatsächlich niedrig halten, da Sie trotzdem nach unten scrollen können. Auf diese Weise können Sie den Inspektor auch offen halten. Ein großartiger Workflow für die Webentwicklung!

Bramchi
quelle