it-swarm.com.de

Wie simuliert man das Pixelverhältnis, um Medienabfragen mit Google Chrome oder Firefox unter Windows) zu testen?

Obwohl es einfach ist, verschiedene Bildschirmauflösungen in Google zu testen Chrome=), frage ich mich, wie Entwickler die verschiedenen Pixelverhältnisse von Geräten testen können, die den folgenden CSS-Medienabfragen zugrunde liegen.

/* Pixel ratio of 1. Background size is 100% (of a 100px image) */
#header { background: url(header.png); }

/* Pixel ratio of 1.5. Background-size is 1/1.5 = 66.67% (of a 150px image) */
@media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
    #header { background: url(headerRatio1_5.png); background-size: 66.67%; }

}

/* Pixel ratio of 2. Background-size is 1/2 = 50% (of a 200px image) */
@media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
    #header { background: url(headerRatio2.png); background-size: 50%; }

}

Gibt es eine Möglichkeit oder eine Browsererweiterung, um das Pixelverhältnis des Geräts nachzuahmen?

38
Stephan Ahlf

about: Konfigurationshack auf Firefox

Sie können Firefox tatsächlich verwenden:

  1. Gehe zu "about: config"
  2. Suchen Sie nach "layout.css.devPixelsPerPx"
  3. Stellen Sie das gewünschte Verhältnis ein (1 für normal, 2 für Netzhaut usw.).

Aktualisieren Sie Ihre Seite - Boom, Ihre Medienabfrage hat jetzt begonnen! Ich wünsche Firefox viel Spaß beim Web-Entwickeln!

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

Zoomen auf Firefox & Edge

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

46
andrewb

Die Chrome DevTools haben eine Funktion namens "Gerätemodus & Mobile Emulation", die in Chrome 32 und höher verfügbar ist. Es wird ausführlich beschrieben hier . Hier ist ein Video-Tutorial von Googles DevBytes YouTube-Kanal.

Öffnen Sie DevTools, indem Sie F12 drücken (oder Umschalt + Strg + I/ Befehl + Opt + I auf dem Mac). Klicken Sie in aktuellen Chrome) Versionen auf das "Smartphone" -Symbol in der oberen linken Ecke des DevTools-Fensters, um Mobile Emulation zu aktivieren. Sie können die meisten Änderungen vornehmen der Einstellungen (Gerätetyp, Auflösung, Pixelverhältnis, Benutzerprogramm ...) in der Symbolleiste des Emulationsbildschirms. Für weitere Optionen klicken Sie auf "..." im Menü rechte Seite der Symbolleiste.

In älteren Chrome-Versionen müssen Sie die Funktion möglicherweise aktivieren, bevor Sie sie verwenden können: Klicken Sie in DevTools auf das Symbol Einstellungen (Zahnrad) und dann auf "Overrides" und wählen Sie "Show 'Emulation' view in console drawer" . Klicken Sie dann auf das "> =" Symbol links neben dem Einstellungssymbol, um die "Konsolenschublade" anzuzeigen. Daraufhin sollte eine "Emulation" angezeigt werden. Registerkarte , auf der Sie die Emulation aktivieren und die Einstellungen ändern können.

19
rob74

Volker E. hat insofern Recht, als keine Medienabfragen im Pixelverhältnis ausgelöst werden.

Es ist jedoch zumindest möglich, eine Vorschau des visuellen Erscheinungsbilds (lesen: Skalieren) von Medienabfragen für Geräte mit dem 1,5-fachen, dem 2-fachen usw. zu erhalten.

Geben Sie einfach Ihre gewünschte Auflösung in Chrome Dev Tools, und stellen Sie sicher, dass "In Fenster einpassen" ausgewählt ist. Ändern Sie dann die Größe Ihres Browserfensters entsprechend.

enter image description here

Beispiel: Um ein Galaxy Nexus im Querformat zu emulieren, geben Sie einfach 720x1280 als Abmessungen ein und ändern Sie die Größe Ihres Browserfensters auf 640px. Voila! Sie haben jetzt das 2x-Pixel-Verhältnis des Geräts emuliert.

(Gerätebreite [in Pixel]) ÷ (Gerätepixelverhältnis) = Die Größe, die Ihr Fenster haben muss

4
derrylwc

derrylwc hat einen guten Vorschlag, aber keine Anweisungen enthalten:

  • Öffnen Sie die Entwicklertools (Strg-Umschalt-i oder Befehl-Alt-i)
  • Klicken Sie auf das Zahnrad in der rechten unteren Ecke, um Einstellungen vorzunehmen
  • Wählen Sie die Registerkarte "Overrides" (auf der linken Seite)
  • Klicken Sie auf "Aktivieren" und "Beim Start von DevTools aktivieren".
  • Überprüfen Sie "Gerätemetriken" und passen Sie an. "Font-Skalierungsfaktor" scheint das Pixelverhältnis des Geräts zu sein.
1
Garry Boyer