Wie teste ich eine Website für Retina unter Windows ohne eine tatsächliche Retina-Anzeige?

84

Gibt es eine Möglichkeit, eine Retina-Anzeige unter Windows zu simulieren, um eine Website für HiDPI-Anzeigen wie Retina zu testen?

Ich verwende Windows auf einem 24 "1920 x 1080 Standard-Monitor. Letzte Nacht habe ich meine Website auf einem brandneuen 15" Retina MacBook Pro von Freunden überprüft und die Grafiken sahen verschwommen aus (weitaus schlechter als auf einem normalen 15 Zoll MacBook), während die Schriftart war Super scharf und scharf, wodurch das Logo aufgrund des direkten Vergleichs noch schlechter erscheint.

Ich habe dieses Tutorial befolgt, um meine Website Retina fertig zu machen:

http://line25.com/tutorials/how-to-create-retina-graphics-for-your-web-designs

Ich habe den Ansatz von retina.js verwendet, da ich keine Hintergrundbilder habe.

Kann ich testen, ob dies tatsächlich funktioniert? Natürlich könnte ich meinen Freund bitten, sein Retina-Notizbuch zu verwenden, aber das ist für mich kein praktikabler Workflow. Ich möchte in der Lage sein, Websites in meiner eigenen Umgebung zumindest grob auf Retina-Kompatibilität zu testen.

Alexander Rechsteiner
quelle
2
Könnte
JSuar
@Jsuar: Leider nicht. Die JavaScript-Bibliothek scheint nicht mit retina.js zu funktionieren, und die Opera scheint für mobile Geräte gedacht zu sein.
Alexander Rechsteiner
2
Versuchen Sie, alle Bilder wie Ihr Logo in SVG zu erstellen, anstatt png oder jpg zu verwenden.
Seph

Antworten:

152

about: config hack auf Firefox

Sie können tatsächlich Firefox verwenden:

  1. Gehen Sie zu "about: config"
  2. Suchen Sie nach "layout.css.devPixelsPerPx"
  3. Ändern Sie es auf das gewünschte Verhältnis (1 für normal, 2 für Netzhaut usw. -1 scheint Standard zu sein.)

Bildschirmfoto:

Aktualisieren Sie Ihre Seite - Boom, Ihre Medienabfrage hat jetzt begonnen! Hut ab vor Firefox, weil er großartig für die Webentwicklung ist! Heads up, nicht nur die Website wird jetzt auf die doppelte Größe vergrößert, sondern auch die Firefox-Benutzeroberfläche wird verdoppelt. Dieses Verdoppeln oder Zoomen ist erforderlich, da nur so alle Pixel auf einem Standardbildschirm mit Pixelverhältnis untersucht werden können.

Dies funktioniert unter Windows 7 mit Firefox 21.0 und unter Mac OS X mit Firefox 27.0.1 einwandfrei.

Wenn Sie keine Medienabfragen und andere erweiterte Logik verwenden (dh Sie füttern alle mit HiDPI-Bildern), können Sie mit Ihrem Browser einfach auf 200% zoomen. Die Chrome-Emulation ist ein hilfreiches Tool und löst Medienabfragen aus. Da sie jedoch das Zoomen verhindert, können Sie die Bildqualität nicht überprüfen.

Zoomen auf Firefox & Edge

Derzeit werden in Firefox und Edge beim Zoomen dppx-basierte Medienabfragen ausgelöst. Dieser einfachere Ansatz mag also ausreichend sein, aber beachten Sie, dass die Funktionalität als Fehler "wird nicht behoben" für Firefox gemeldet wird , sodass sich dies ändern kann.

andrewb
quelle
2
Weiß jemand, gibt es etwas Ähnliches für Chrome?
Krzysztof Romanowski
@castus Glaube nicht, das Beste, was du hast, ist das Vergrößern, und ich glaube nicht, dass dies bei Medienabfragen zu Problemen führt.
Andrew
@andrewb: Ich habe mich das Gleiche gefragt, als es meinen Ruf stärkte (yay!). Möglicherweise wurde es in Google für einen häufigen Suchbegriff indiziert.
Alexander Rechsteiner
@AlexanderRechsteiner Es wurde tatsächlich von der Facebook-Seite des Smashing Magazine verlinkt und von einigen Leuten auf Facebook geteilt. Danke, dass du meine Antwort angenommen hast!
Andrew
@ChristinaArasmoBeymer Yep es kann
andrewb
25

In der Google Chrome-Version "33.0.1720.0 Canary" können Sie jetzt Geräte wie das iPhone5 und andere mit einer Vielzahl von Parametern wie "Gerätepixelverhältnis", "Android-Schriftmetriken" und "Ansichtsfenster-Emulation" emulieren .

Dieser Firefox-Hack ist nicht mehr erforderlich - es ist sowieso schwer, damit zu arbeiten.

Vielen Dank an das Google-Entwicklerteam! ! :)

Urb Gim Tam
quelle
1
Ich habe mir MediaQueries nicht angesehen, aber im Hinblick auf die Überprüfung der Bildqualität sehe ich nicht, wie hilfreich dies ist. Sie müssen die Pixel X2 vergrößern, da Sie sonst nicht visuell sehen können, welcher Inhalt für die Retina bereit ist und welcher nicht. Ich habe einen kurzen Test durchgeführt und Chrome hat die google.com-Website nur klein aussehen lassen. Als ich jedoch auf Firefox ging, stellte ich fest, dass Google Doodle zu diesem Zeitpunkt keine Retina-Pixeldichte aufwies. Aber hey, wenn dies für Leute funktioniert, bedeutet es, die verrückte große Benutzeroberfläche mit der Firefox-Konfiguration zu überspringen!
Andrewb
Ja, hier geht es nicht darum, die Bildqualität zu verbessern (es ist unmöglich, da der physische Bildschirm die gleiche Pixeldichte aufweist), sondern als Entwickler ohne Retina-Mac sicher zu sein, dass Sie immer noch alle Grundlagen abdecken.
Urb Gim Tam
Wenn Sie nur die Bildqualität überprüfen möchten, müssen Sie nur Ihren Browser um 200% zoomen. Wenn Sie Medienabfragen in Chrome ausführen möchten, sollten Sie beides tun: Zoomen und Emulieren.
Michael McGinnis
@MichaelMcGinnis Ich kann mit Chrome nicht emulieren und zoomen. Warst du in der Lage?
Andrew
Ja @andrewb, es sieht so aus, als müssten es separate Tests sein. Wenn ich zoome und dann emuliere, werden die Bilder wieder klein. Das Zoomen während der Emulation wirkt sich nicht auf die Bildgröße aus.
Michael McGinnis
14

In Chrom können Sie dies tun durch:

1) Öffnen Sie die Chrome Developer Tools und klicken Sie auf das kleine "Zahnrad" -Symbol. Geben Sie hier die Bildbeschreibung ein


2) Wählen Sie dann "Emulationsansicht in Konsolenschublade anzeigen". Geben Sie hier die Bildbeschreibung ein


3) Öffnen Sie abschließend die "Konsolenschublade" in den Entwicklertools und wählen Sie Emulation . Set Emulieren Bildschirm und dem eingestellten Gerätepixelverhältnis bis 2,5.

Geben Sie hier die Bildbeschreibung ein

thegreyspot
quelle
10

Soweit ich das beurteilen kann, ist es nur möglich, ein Netzhautgerät zu kaufen.

Einige Problemumgehungen

Weniger relevant

JSuar
quelle
Vielen Dank, der Aufzählungspunkt von developer.apple.com hat mich auf den richtigen Weg gebracht. Wie auch diese andere Antwort hier auf Stack Overflow.
Alex Kendrick
7

Aktuelle Methode zum Emulieren einer Retina-Anzeige (HiDPI) mit Google Chrome

1)Rechtsklick “ auf der Web - Seite und wählen Sie „ Inspect “ zu öffnen Chrome Developer Tools

2) Klicken Sie auf das Symbol " Gerätemodus umschalten "

Klicken Sie auf das Symbol Gerätemodus umschalten

3) Wählen Sie im Dropdown-Feld Gerät oben auf dem Bildschirm " Laptop mit HiDPI-Bildschirm " aus.

Wählen Sie Laptop mit HiDPI-Bildschirm

4) Sie können jetzt sehen, wie die Website auf einem Retina aka HiDPI-Bildschirm aussehen wird

user280109
quelle
1

Ich verwende eine Bibliothek zur Größenänderung von Bildern, um Bilder dynamisch zu erstellen. Für die 2x-Version füge ich beim Debuggen ein dynamisches Wasserzeichen hinzu - dies macht es sehr einfach zu sehen, ob das hochauflösende Bild tatsächlich angezeigt wird oder nicht. Habe es sehr hilfreich gefunden.

Die Funktionsweise variiert, daher ohne Beispielcode.

Simon_Weaver
quelle
1

Google Chrome Version 80

  1. Öffnen Sie die Entwicklertools ctrl-shift j
  2. Schalten Sie die Gerätesymbolleiste um, indem Sie oben links auf das Tablet- / Telefonsymbol klicken (es wird blau, wenn Sie darauf klicken).

Geben Sie hier die Bildbeschreibung ein

  1. Jetzt sollte das Ansichtsfenster eine Symbolleiste darüber haben. Klicken Sie oben rechts auf das Optionssymbol (3 Punkte) und wählen Sie die Option Gerätepixelverhältnis hinzufügen.

Geben Sie hier die Bildbeschreibung ein

  1. Sie sollten jetzt die Option in der Symbolleiste sehen. Von hier aus können Sie zu 1x, 2x oder 3x wechseln.

Geben Sie hier die Bildbeschreibung ein

  1. Stellen Sie beim Testen sicher, dass Sie bei jeder Änderung des Pixelverhältnisses auf die Schaltfläche "Aktualisieren" klicken. Wenn Sie das Verhältnis auf 2x und dann wieder auf niedriger einstellen, werden keine Änderungen angezeigt, da der Browser keine 1x-Assets abruft, wenn er bereits 2x oder höher abgerufen hat.
Isaac Pak
quelle
-1

Ich weiß nicht, ob dies zu einfach ist. Ich drücke Strg und scrolle und es löst die Medienabfrage aus. Ich habe es in Bugzilla überprüft und es funktioniert. Ich bin mir nicht sicher über die SVG-Skalierung, da sie verschwommen erscheint, aber es ist das SVG-Bild.

Dale Wemyss
quelle
Welchen Browser oder welche Hardware verwenden Sie? Meinst du Mozilla statt Bugzilla?
Michael McGinnis
-2

Wenn Sie einen Mac (oder eine virtuelle Mac OSX-Maschine) haben, können Sie den iOS-Emulator mit xcode verwenden. Es sprengt das Fenster doppelt so groß, so dass es im wirklichen Leben nicht so aussieht, aber es zeigt Ihnen deutlich, ob Ihre Bilder verschwommen sind oder nicht.

Filtah
quelle
Ja, und Sie können
OS
@ Filtah wirklich nicht der schlechteste Vorschlag
Paul