Wie teste ich eine Webseite für die Retina-Anzeige?

70

Ich habe eine Webseite für die Anzeige der Netzhaut codiert. Ich habe derzeit keinen Retina-Monitor.

Gibt es eine Simulatoranwendung oder ein Simulator-Tool zum Testen von Webseiten für die Retina-Anzeige?

Oder gibt es Monitore (nicht das MacBook oder iPad von Apple), die dem Retina-Display von Apple ähneln?

Danke im Voraus.

webpage retina-display Sangam254
quelle
Gibt es auch Ähnlichkeiten zwischen hochauflösenden Monitoren und Retina-Display-Monitoren?
Sangam254
1
Mögliches Duplikat von Wie teste ich eine Website für Retina unter Windows ohne eine tatsächliche Retina-Anzeige?
Andrewb

Antworten:

113

about: config hack auf Firefox

Sie können tatsächlich Firefox verwenden:

  1. Gehe zu about:config
  2. Finden layout.css.devPixelsPerPx
  3. Ändern Sie es auf das gewünschte Verhältnis (1 für normal, 2 für Netzhaut usw.)

Bildschirmfoto:

Aktualisieren Sie Ihre Seite - Boom, Ihre Medienabfrage hat jetzt begonnen! Hut ab vor Firefox, weil er großartig für die Webentwicklung ist!

Dies wurde unter Windows 7 mit Firefox 21.0 durchgeführt.

Der Vorteil dieser Lösung besteht darin, dass Medienabfragen und andere erweiterte Logik ausgelöst werden. Wenn Sie dies nicht tun und nur allen die HiDPI-Bilder zuführen, können Sie einfach mit Chrome usw. zoomen (oder CSS schreiben, um für Sie zu zoomen, wenn dies Ihr Boot schwimmt).

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 "nicht behebbarer" Fehler für Firefox gemeldet wird , sodass sich dies ändern kann.

andrewb
quelle
7
In meiner Version von Firefox 24 ist der Standardwert -1, setzen Sie ihn also einfach auf -2. Oder setzen Sie es für den umgekehrten Effekt auf 2, was ebenfalls nützlich ist.
Mario Awad
3
Das ist seltsam, meins (FF 24 unter OS X 10.7 und Win 7) akzeptiert keinen Wert von -2 oder macht zumindest keinen Unterschied. Mein Standard war tatsächlich -1. Ich frage mich, ob dies keine Skalierungsberechnungen oder ähnliches bedeutet.
Andrew
2
Unter FF 31 / Win7 funktioniert das Einstellen auf (+) 1,5 je nach Stylesheet gut, ohne dass das Fenster zu groß wird. Obwohl der Standardwert -1 ist, scheint das Setzen auf einen negativen Wert keine Anzeige mit höherer DPI auszulösen.
Nickb
@nickb Denken Sie daran, dass 1,5 weniger als das Standardverhältnis von Retina-Pixeln pro Pixel von 2 ist, sodass Medienabfragen möglicherweise nicht ausgelöst werden.
Andrew
1
@andrewb Ja, Retina würde 2x benötigen. Hängt davon ab, ob Sie etwas über dem Standard-px-Verhältnis oder einem bestimmten Ziel benötigen. Wenn Ihre Bilder mit hoher DPI allgemeiner sind (dh etwas> 1,0 und nicht speziell Retina-Geräte), reicht 1,5 aus, wenn nicht, erhöhen Sie sie nach Bedarf.
Nickb
20

Sie können mit dem Chrome-Browser überprüfen, ob die Retina-Anzeige funktioniert oder nicht. Verwenden Sie diese Anleitung

  1. Öffnen Sie Chrome Browserund right clickklicken Sie danninspect element
  2. In der unteren Leiste finden Sie einige Registerkarten, die console, search, emulation and rendering
  3. Klicken Sie auf die Registerkarten emulationund ziehen Sie die Leistenleiste wie unten gezeigt nach oben
  4. Stellen Sie leftdas Gerät, den Bildschirm usw. gemäß dem Menü auf ein .

Weitere Informationen finden Sie in diesem Artikel: http://www.gee.web.id/2014/09/how-test-retina-display-on-chrome.html

Gee
quelle
4
Wenn Sie in Schritt 2 die Leiste unten nicht sehen können, drücken Sie die Escape-Taste, während die Entwicklerkonsole noch geöffnet ist. Dadurch wird die Registerkarte mit den Registerkarten unten umgeschaltet.
Sam
4

Auf GitHub gibt es einen JavaScript Web Retina Emulator .

Sie können Opera Mobile Emulator auch zum Testen auf benutzerdefinierte Auflösungen verwenden. Hier finden Sie eine Erklärung, wie es geht .

Wenn Sie einen älteren Apple-Computer haben (ohne Retina-Display), können Sie Retina-Displays mit Quartz Debug, einem Tool in XCode, simulieren. Auch in XCode können Sie mit dem iOS-Simulator auf iOS-Geräte mit Retina-Displays testen.

Nelu
quelle
4

Sie können diese CSS hinzufügen. Alles wird doppelt so groß aussehen, aber es macht es leicht zu erkennen, wenn es irgendwelche Probleme gibt. Der Javascript Web Retina Emulator hat bei mir nicht funktioniert (verschwommen in Safari)

body {
  zoom: 200%;
  -moz-transform: scale(2);
  -moz-transform-origin: 0 0;
}

Der Zoom: 200% gilt für das Webkit, -moz für Firefox. Safari / Chrome / Firefox funktioniert also, nicht sicher über den IE.

Wenn Sie -webkit-transform: scale (2) anwenden, sehen die Dinge verschwommen aus, sodass Sie den Zoom verwenden müssen: 200%;

Placeboaddict
quelle
4
Wie Daniel sagt, reicht dieser Code allein nicht aus, da er keine Medienabfragen auslöst, bei denen Bilder auf Gegenstücke mit höherer Auflösung umgeschaltet werden. Die Bilder sehen verschwommen aus, wenn Sie nicht die andrewb-Lösung verwenden, die das Pixelverhältnis ändert.
Michael McGinnis
0 
body {
  zoom: 200%;
  -moz-transform: scale(2);
  -moz-transform-origin: 0 0;
}

Dieser Code allein reicht nicht aus. Wenn Sie Medienabfragen verwenden, sollten Sie das Pixelverhältnis auf 1 anstatt auf 1,5 oder 2 ändern, um den Trick auszuführen. Andernfalls werden die Bilder nicht auf die Gegenstücke mit höherer Auflösung umgeschaltet.

Daniel Dogeanu
quelle
0

Gehen Sie in Firefox oder Chrome einfach in den Reaktionsmodus und bearbeiten Sie die Auflösungen, um Folgendes auszuwählen: Laptops mit HiDPI-Bildschirm. Es wird den Job machen! ;)

DanX
quelle