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

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.

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.

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! ! :)

In Chrom können Sie dies tun durch:

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

2) Wählen Sie dann "Emulationsansicht in Konsolenschublade anzeigen".

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.

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

Einige Problemumgehungen

• Hier vorgeschlagen:

  • Wenn Sie die Bildgröße verdoppelt haben und die Proportionen immer noch gleich sind, sind Sie ziemlich sicher. Wenn Sie kein Retina-Display zum Testen haben, wechseln Sie von der Medienabfrage mit Pixelverhältnis zu etwas Breitenbasiertem.

  • Testen und Beheben von hochauflösenden Inhalten
    http://developer.apple.com/library/mac/#documentation/GraphicsAnimation/Conceptual/HighResolutionOSX/Testing/Testing.html

• Entwickeln für HiDPI („Retina“) ohne Retina MacBook Pro
  http://make.wordpress.org/ui/2012/08/01/dev-for-hidpi-without-retina-mbp/

• WordPress Retina Images
  http://wpmu.org/wordpress-retina/

Weniger relevant

• So erstellen Sie eine reaktionsschnelle, Retina-fähige Website

• So gestalten Sie für Apples Retina-Displays
  http://www.studiopress.com/design/retina-display-design.htm

• Erstellen von Websites für Retina-Displays: Freunde finden mit Pixeln
  http://www.slideshare.net/shoshizilla/building-websites-for-retina-displays-making-friends-with-pixels

• Wie entwickelt man eine Website für die Retina-Anzeige?

• Wie mache ich mich für die Netzhaut bereit?

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 "

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

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

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.

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).

3. 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.

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

5. 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.

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.

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.