Wie simuliere ich einen Bildschirm mit höherer Auflösung? [geschlossen]

93

Gibt es eine Möglichkeit für den Browser, meine Websites in Auflösungen zu testen, die höher als meine Bildschirme sind?

Beispiel: Ich habe einen 1440 x 900-Bildschirm und möchte die Website in den Größen 1920 x 1200, 1920 x 1080 usw. testen.

html css resolution HappyDeveloper
quelle
@deceze eigentlich ist es ein sehr guter Vorschlag. Der springende Punkt bei Dingen wie 960.gs ist, dass wenn Sie mit Pixelgrößen arbeiten, Ihr Design überall gleich aussieht und nur unterschiedliche Mengen an Bildschirmfläche beansprucht, basierend auf der Auflösung des Bildschirms. Es ist nicht erforderlich, horizontal wiederholte Grafiken in hoher Auflösung zu testen, solange Sie vollständige 2 und ein wenig Wiederholungen sehen können, um sicherzustellen, dass alle Nähte ausgerichtet sind. Oder Sie können einfach das Zikadenprinzip verwenden, um etwas Interessanteres zu produzieren.
Endophage
1
@ Endophage: Ich bin anderer Meinung. Das Erstellen korrekt flüssiger Layouts führt häufig zu besseren Ergebnissen, z. B. hinsichtlich der Einstellungen für die Schriftgröße des Benutzers. Überall gleich auszusehen ist nicht unbedingt notwendig, es ist nur Pixel-Peeping.
Sie
@Sie habe ich noch kein flüssiges Layout gesehen, das die Schriftgröße ändert. Beachten Sie, dass feste Pixelbreiten gut sind, weil das menschliche Auge Schwierigkeiten hat, Linien über eine bestimmte Länge zu scannen (ich glaube, es wurden ungefähr 20 Wörter bei einer Schriftgröße von ungefähr 12 Pixel gefunden, Sie können es selbst nachschlagen). Wenn Sie über Telefonauflösungen sprechen, ist das eine andere Geschichte, aber wenn Sie über Desktop- / Laptop-Auflösungen sprechen, wenn ich nur einen großen Arschbildschirm mit hoher Auflösung habe und die Fenstergröße verändere, teste ich effektiv auf verschiedene Auflösungen.
Endophage
1
@Endophage: Daher die Notwendigkeit, 40em(oder eine ähnliche Messung) nicht 960pxals Ihre Breite zu verwenden. Pixel werden nicht skaliert, wenn ich feststelle, dass Ihre 12px-Schriftgröße zu klein für mich ist, und drücken Sie Cmd- +. Außerdem ist mein Browserfenster so wie es ist kaum 960px.
Sie
@Sie tatsächlich werden Pixel skaliert, wenn Sie drücken, Ctrl/Cmd +da es sich um eine Zoomfunktion handelt. Sie können es hier auf SO versuchen. Der Hauptinhaltsbereich ist 960px breit. Die Verwendung von 40em lässt sich nicht mit der Bildschirmauflösung skalieren. Die Verwendung von emGrößen bezieht sich auf die Schriftgröße des übergeordneten Elements, das bis zu 1em / 16px auf der obersten Ebene vererbt wird, sofern es nicht überschrieben wird (und entschuldigt, es sollte in meinem früheren Kommentar 12pt und nicht px gewesen sein). Lesen Sie weiter: kyleschaeffer.com/best-practices/…
Endophage

Antworten:

76

[Bearbeiten: Überprüfen Sie zuerst die Devtools Ihres Browsers! Wie @SkylarIttner in den Kommentaren hervorhebt, wurden Tools für reaktionsschnelle Designtests eingeführt, da in den meisten Browsern die folgende Lösung veröffentlicht wurde. Sie sind jetzt wahrscheinlich die beste / einfachste Option.]

Sie könnten mich korrigieren, wenn ich falsch liege, einfach einen Iframe mit style="desired width & height"und src="your/test.site"als einziges Kind von erstellen <body>. Sollte die Site so anzeigen, als ob die Auflösung die angegebene Breite / Höhe hätte, und zu Bildlaufleisten führen, um sie zu untersuchen.

Nicht so bequem wie die Verwendung eines Drittanbieters, der selbst eingerichtet werden muss, hat jedoch den Vorteil, dass Sie ohne Internetverbindung lokal testen können.

Cody Crumrine
quelle
5
Warum ... ich muss sagen, das ist Genie. +1
Mafia
Natürlich! Danke dir! ^^
Oskar Duveborn
Ich kann dir nicht genug danken!
Rahman Sharif
1
Vielen Dank für all die positiven Rückmeldungen. Es ist schön zu wissen, wann die Dinge hilfreich sind.
Cody Crumrine
1
Hier ist der Beispielcode, um das zu tun, was @Cody Crumrine vorgeschlagen hat und was Genius ist !! <iframe src = " site to test.com" width = "1024" height = "768"> </ iframe>
Stuart
28

Diese Lösung ist viel schneller als die oben vorgeschlagenen:

http://www.infobyip.com/testwebsiteresolution.php

Es ist nicht so vielseitig wie Browsershots.org, aber es ist viel schneller (einige Sekunden gegenüber einer 45-minütigen Warteschlange).

Kyle
quelle
Dies ist keine schlechte Antwort. Diese Site bietet jedoch absolut nichts, was Sie nicht selbst tun können, indem Sie einfach die Größe des Browserfensters auf einem Desktop-Computer ändern. IMHO, die Links auf dieser Seite für Tablets und Telefone sind absolut wertlos ... da auf einem kleinen iPod-Bildschirm die Größe meiner 1000 Pixel breiten Website von Mobile Safari automatisch so geändert wird, dass sie einwandfrei angezeigt wird.
Sparky
4
@ Sparky672, ich persönlich kann die Größe meines Browsers nicht so ändern, dass er größer als meine Bildschirmauflösung ist. Das OP wollte 1920 auf einem 1440 sehen. Vielleicht gibt es einen Weg, aber ist es so einfach wie die Lösung von infobyip? Entschuldigung, wenn ich etwas Offensichtliches übersehen habe (ich habe das Gefühl, dass ich es sein könnte).
Kyle
2
Danke @ Sparky672 und kein Problem. Aber sollten Sie nicht Ihren Kommentar "Diese Site bietet absolut nichts, was Sie nicht selbst tun können, indem Sie einfach die Größe des Browserfensters auf einem Desktop-Computer ändern" löschen, da dies nicht der Fall ist?
Kyle
1
@ Sparky672, was ist mit vertikal?
Kyle
1
Ich benutze vertikal, um zu sehen, was über und unter die Falte fällt. Ich kombiniere es mit StatsCounter und MouseFlow, um zu sehen, wie viel Prozent des Publikums was sehen. Ich liebe dich Sparky! Ich denke du liest meinen Ton falsch. Und ich wollte hilfreich sein. Niemand wird die Lösung untersuchen, die ich mit 0 Stimmen und einer Liste von Kommentaren zur Verfügung stelle. Aber na ja ...
Kyle
9

Einige Ideen:

Verwenden Sie den Browser-Zoom, 1024 x 768, 50% Zoom = 2048 x 1536 simulierte Auflösung. Ich weiß, dass Chrome die Größe von Bildern und dergleichen ändert. Die Dinge werden schwer zu lesen, aber ich gehe davon aus, dass Sie die Platzierung und dergleichen testen.

Sie können auch einige Screenshot-Programme verwenden, um Screenshots mit höherer Auflösung als normal aufzulösen (Fireshot unter Firefox ließ mich dies tun, hatte jedoch Speicherprobleme mit wirklich hohen Auflösungen und ist nicht mehr kostenlos).

StrangeWill
quelle
6

Eine Lösung, vielleicht übertrieben, wäre die Verwendung von Xvfb : Stellen Sie die gewünschte Auflösung und Farbtiefe ein, laden Sie Ihre Seite in Browser und machen Sie Screenshots.

Eugen Constantin Dinca
quelle
4

Versuchen Sie es mit viewlike.us oder screen-resolution.com . Es sind nicht alle möglichen Auflösungen, aber zumindest die häufigsten.

Ich habe sie nicht ausprobiert, aber es scheint ziemlich einfach zu sein.

Eddie Cheng
quelle
Die Bildschirmauflösung lautet wie folgt: "Ihre Bildschirmauflösung ist zu klein. Das von Ihnen ausgewählte Popup ist zu groß für die von Ihnen verwendete Bildschirmauflösung. Ihre Bildschirmauflösung beträgt 1440 x 900 Pixel. Das Popup-Fenster, das Sie öffnen wollten, ist 1920 Pixel bis 1200. "
HappyDeveloper
Eine Ansicht wie wir löst Folgendes aus: "Verboten Sie haben keine Berechtigung zum Zugriff auf / auf diesem Server. Außerdem ist beim Versuch, ein ErrorDocument zur Bearbeitung der Anforderung zu verwenden, ein Fehler 404 Not Found aufgetreten. Apache mod_fcgid / 2.3.6 mod_auth_passthrough / 2.1 mod_bwlimited / 1.4 FrontPage / 5.0.2.2635 Server unter viewlike.us Port 80 "
HappyDeveloper
2

Obwohl dies nicht die genaue Auflösung Ihrer Tests angibt, können Sie das zoomTool in Chrome oder FF zum Verkleinern verwenden. Dies gibt eine ziemlich genaue Vorstellung davon, wie die Site auf Bildschirmen mit höherer Auflösung aussieht.

Jason Gennaro
quelle
2

Wenn Sie nur einen statischen Screenshot Ihrer Website sehen möchten, würde ich http://browsershots.org/ empfehlen.

Sie bieten Ihnen die Möglichkeit, Screenshots Ihrer Website in praktisch jeder Browser / Betriebssystem-Kombination anzuzeigen, einschließlich der Möglichkeit, die Bildschirmgröße anzugeben, sowie einer ganzen Reihe weiterer Optionen.

Es lohnt sich, ein Lesezeichen zu setzen.

Spudley
quelle
1

Möglicherweise möchten Sie wkhtmltoimage ausprobieren , mit dem Screenshots mit beliebigen Auflösungen erstellt werden können.

In KDE4 ist es auch möglich, ein Fenster über die Bildschirmgröße hinaus zu vergrößern. Ich glaube, ich habe es auch in Windows 7 gesehen. Ich bin mir bei anderen Betriebssystemen nicht sicher.

user123444555621
quelle
1

Mit IE9 können Sie die Größe des Browserfensters auf eine beliebige Größe ändern: Drücken Sie F12 für Entwicklertools und gehen Sie zu Extras | Ändern Sie die Größe und wählen Sie Ihre bevorzugte Größe. Verwenden Sie dann ein Tool, mit dem Sie Fenster außerhalb des Bildschirms erfassen können, wenn das Fenster größer als Ihr Bildschirm ist. Dieser Artikel scheint darauf hinzudeuten, dass Snagit dies kann. Dann schauen Sie sich einfach das aufgenommene Bild an.

Jaco Briers
quelle