wake-up-neo.com

Stoppen Sie die Firefox-DPI-Skalierung (wenn die Windows-Einstellung 125% beträgt)

Ich mache gerade eine Webseite und teste sie in Chrome. Das funktioniert gut, aber in Firefox - es wird vergrößert.

Dies liegt daran, dass meine DPI in Windows auf 125% eingestellt ist und Firefox dies erkennt und jede Webseite entsprechend anpasst.

Allerdings ist meine Webseite nicht dazu gedacht, mit einer solchen Zoomstufe betrachtet zu werden. Die Bilder werden nicht so groß dargestellt, dass sie unscharf erscheinen. Das allgemeine Layout der Seite ist auch durcheinander, weil alles so groß ist.

Nun, das betrifft die meisten Menschen nicht, da ihre DPI unter Windows 100% beträgt. Ich möchte jedoch, dass es auf allen Browsern gleich ist.

Ich habe nach Lösungen für den Benutzer gesucht, die diese "Funktion" deaktivieren. Ich möchte sie jedoch von meiner Website aus deaktivieren können, sodass sie für den Benutzer überhaupt nicht falsch aussieht.

z.B. Ein Beitrag sagt:

1) Geben Sie about:config in die Adressleiste ein 
2) Suche nach layout.css.devPixelsPerPx 
3) Wert von layout.css.devPixelsPerPx von -1.0 in 1.0 ändern 

Aber das ist es nicht, wonach ich suche. Gibt es eine Möglichkeit, dies in CSS/HTML/irgendetwas zu deaktivieren?

Vielen Dank.

30
Brugsen

Das frustriert mich auch, aber zum Glück gibt es eine Lösung.

Navigieren Sie zu about:config. (Klicken Sie auf alle Warnungen, die Sie auffordern, vorsichtig mit den erweiterten Funktionen umzugehen.)

Suchen Sie nach layout.css.devPixelsPerPx und ändern Sie den Wert in 1.0. Ihr Problem sollte behoben sein.

Es wurde etwas in Firefox 22 implementiert.

13
Terry Robb

Sie können Ihre Website leicht auf Benutzer mit Einstellungen mit höheren Zoomstufen ansprechen lassen, indem Sie eine Medienabfrage wie:

@media only screen and( -webkit-min-device-pixel-ratio: 1.25 ),
       only screen and(      -o-min-device-pixel-ratio: 5/4 ),
       only screen and( min-resolution: 120dpi ),
       only screen and( min-resolution: 1.25dppx ) {
    body {
        font-size: 1rem;
    }
} 

In diesem Artikel finden Sie eine ausführlichere Erklärung und warum die bereinigte Lösung der Medienabfrage für eine breite Browserunterstützung ausreichend ist: IE9 +, Fx3.5 +, Opera9.5 +, Webkit-Browser Chrome und Safari sowie Desktop und Handy, Mobiltelefon.

10
Volker E.

Sie könnten so etwas wie folgt versuchen. Es gibt einige Vorbehalte, die dies verwenden, aber für einige Situationen ist es sinnvoll, es zu verwenden.

    @media screen and (min-resolution: 120dpi) { 
    /*body {transform: scale(0.8);width: 125%;height: 125%;margin-left: -12.5%;}*/
    body {transform: scale(0.8);transform-Origin:top left;width: 125%;height: 125%;}
}

Kommentierte /*body....*/-Beispielskala ist möglicherweise einfacher zu verstehen, aber noch schlechter, z. weil Skalierung basierend auf der transform-Origin-CSS-Regel oben links ausgeführt werden soll. Dann können die Dinge besonders in Chrome besser dargestellt werden.

wenn Sie width: 125% verwenden, sollte Ihre RWD-CSS anders auf das Ändern der Browsergröße reagieren, als Sie erwartet hatten, als das Bildschirmverhältnis 100% betrug. Und Sie könnten dies vernünftigerweise akzeptieren - dies ist RWD und die Differenz beträgt 25%. Aber manche Leute möchten vielleicht ihre CSS so anpassen:

@media screen and (min-width: 1000px)

sie müssen auch anpassen:

@media screen and (min-width: 800px)

wahrscheinlich nicht 1250px, sondern 800px wie ich.

Edge, Chrome, FF sind ziemlich gut. IE 11 machte das Schlimmste noch nicht hoffnungslos.

Es gibt einige Probleme in FF (nicht Edge, Chrome) beim Erweitern von Auswahlfeldern - Lösung css select . Einige Rahmen können sichtbar sein, einige verschwinden auf FF (möglicherweise nicht Edge, Chrome).

Es kann einige Probleme geben, die hier nicht erwähnt werden, z. B. wenn Sie auf Ihrer Seite Karussell wie Eulenkarussell verwenden.

Ich denke jedoch, dass es wahrscheinlicher ist, mit diesem noch zu wenig getesteten Beispiel mehr Zeit zu sparen.

Sie müssen eine exakte Skalierung wie 0,8 für einen Bildschirm von 125% verwenden, damit Ihre Bilder so scharf wie möglich dargestellt werden.

Ich habe festgestellt, dass beim Wechseln zu unterschiedlichen dpi-Auflösungen mit Strg +/i in einem Desktop-Browser und bei der Verwendung von Multitouch-Gesten in mobilen Browsern auch ein Browser die dpi ändert, sodass eine Lösung, die die @ media min/max-Auflösung verwendet, möglicherweise nicht wie erwartet funktioniert . Was in css benötigt wird, ist das Lesen der Systemauflösung, nicht des Browsers. Wie ich sehe, findet diese Änderung jedoch nicht statt, wenn jemand die Browsergröße manuell ändert oder ein mobiles Gerät dreht.

Vielen Dank Tatsuyuki Ishi für die Korrektur einiger Fehler meiner Antwort.

2
OpenEX

Setzen Sie den Wert auf 1,25: Dadurch wird die Benutzeroberfläche größer, die Website wird jedoch auf 100% Pixel-Mapping zurückgesetzt.

0
jonh