webentwicklung-frage-antwort-db.com.de

Wie teste ich eine Website für Retina unter Windows ohne ein echtes Retina-Display?

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

Ich habe Windows auf einem 24 "1920 x 1080 Standardmonitor ausgeführt. Letzte Nacht habe ich meine Website auf einem brandneuen 15" Retina MacBook Pro überprüft. Die Grafiken sahen alle verschwommen aus (weitaus schlechter als bei einem normalen 15 "MacBook), während die Schriftart war Super scharf und scharf, wodurch das Logo durch den direkten Vergleich noch schlechter erscheint.

Ich bin diesem Tutorial gefolgt, um meine Website Retina fertig zu machen:

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

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

Gibt es eine Möglichkeit für mich zu 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 durchführbarer Arbeitsablauf. Ich möchte in der Lage sein, Websites in ihrer eigenen Umgebung zumindest ungefähr auf Retina-Kompatibilität zu testen.

htmlcssretina-displayretina.js
78
Alexander Rechsteiner

about: config hack auf Firefox

Sie können Firefox tatsächlich verwenden:

  1. Gehe zu "about: config"
  2. Suchen Sie nach "layout.css.devPixelsPerPx"
  3. Ändern Sie es in Ihrem gewünschten Verhältnis (1 für normale, 2 für Netzhaut usw. -1 scheint Standard zu sein.)

Bildschirmfoto:

Aktualisieren Sie Ihre Seite - Boom, Ihre Medienabfrage ist jetzt eingetreten! Hut ab vor Firefox für das Entwickeln im Web! Es ist nicht nur die Website doppelt so groß, sondern auch die Firefox-Benutzeroberfläche wird verdoppelt. Dieses Verdoppeln oder Zoomen ist notwendig, da nur so alle Pixel auf einem Standardbildschirm mit Pixelverhältnis untersucht werden können.

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

Wenn Sie keine Medienabfragen und andere erweiterte Logik verwenden (d. H. Sie füttern alle HiDPI-Bilder), können Sie mit Ihrem Browser einfach auf 200% zoomen. Die Chrome-Emulation ist ein hilfreiches Werkzeug und tritt auch bei Medienabfragen auf. Da das Zoomen jedoch verhindert wird, kann die Bildqualität nicht untersucht werden.

Firefox & Edge zoomen

Derzeit in Firefox und Edge wird beim Zoomen dppx-basierte Medienabfragen ausgelöst. Dieser einfachere Ansatz ist möglicherweise ausreichend. Beachten Sie jedoch, dass die Funktionalität als "nicht behoben" bug für Firefox gemeldet wird. Dies könnte sich also ändern.

148
andrewb

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

Dieser Firefox-Hack ist nicht mehr nötig - es ist ohnehin schwer, damit zu arbeiten.

Vielen Dank an das Google-Entwicklerteam! ! :)

24
Urb Gim Tam

In Chrom können Sie dies tun durch:

1) Öffnen Sie die Chrome Developer Tools und klicken Sie auf das kleine "Zahnrad" -Symbol .enter image description here

2) Wählen Sie dann "Emulationsansicht in Konsolenschublade anzeigen." enter image description here

3) Öffnen Sie schließlich die "Konsole" in den Developer Tools und wählen Sie Emulation . Stellen Sie Bildschirm emulieren und setzen Sie das Device Pixel Ratio auf 2,5.

enter image description here

14
thegreyspot

Soweit ich das beurteilen kann, ist es außer dem Kauf eines Retina-Geräts nicht möglich.

Einige Problemumgehungen

Weniger relevant

10
JSuar

Aktuelle Methode zur Emulation einer Retina (HiDPI) mit Google Chrome

1) "Rechtsklick" auf der Webseite und dann "Inspect" auswählen, um die Developer Tools von Chrome zu öffnen

2) Klicken Sie auf das Symbol "Toggle Device Mode"

 Click the Toggle Device Mode Icon

3) Wählen Sie im Dropdown-Feld Gerät am oberen Bildschirmrand "Laptop mit HiDPI-Bildschirm" aus.

 Select Laptop with HiDPI Screen

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

7
user280109

Ich verwende eine Bibliothek zur Bildgrößenänderung, um Bilder dynamisch zu erstellen. Bei der 2x-Version füge ich beim Debuggen ein dynamisches Wasserzeichen hinzu. Dadurch kann man sehr leicht erkennen, ob das hochauflösende Bild tatsächlich angezeigt wird oder nicht. Habe es sehr hilfreich gefunden.

Die Art und Weise, wie dies funktioniert, variiert, so dass der Beispielcode nicht eingeschlossen ist. 

0
Simon_Weaver