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.
quelle
Antworten:
about: config hack auf Firefox
Sie können tatsächlich Firefox verwenden:
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.
quelle
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! ! :)
quelle
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.
quelle
Soweit ich das beurteilen kann, ist es nur möglich, ein Netzhautgerät zu kaufen.
Einige Problemumgehungen
Hier vorgeschlagen:
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?
quelle
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
quelle
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.
quelle
Google Chrome Version 80
ctrl-shift j
quelle
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.
quelle
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.
quelle