Stopp Firefox DPI Skalierung (bei Windows-Einstellung bei 125% ist)

Question

Ich bin derzeit eine Webseite machen und teste es in Chrom funktioniert gut, aber in Firefox -. Es in gezoomt

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

Allerdings ist meine Webseite nicht dazu gedacht, mit einer solchen Zoomstufe betrachtet zu werden, die Bilder sind nicht so groß dargestellt und daher verschwommen/verpixelt. Das generelle Layout der Seite ist ebenfalls durcheinander, weil alles so groß ist.

Jetzt betrifft dies die meisten Menschen nicht - da ihre DPI in Windows zu 100% wäre. Ich möchte jedoch, dass es in allen Browsern gleich ist.

Ich habe gesucht und habe Lösungen gefunden, wie für den Benutzer dieses "Feature" zu deaktivieren - aber ich möchte es von meiner Website deaktivieren - so sieht es nicht falsch für den Benutzer an erster Stelle .

z.B. ein Beitrag sagt:

1) Typ about:config in Adressleiste
2) Suche nach layout.css.devPixelsPerPx
3) Änderungswert von layout.css.devPixelsPerPx-1.0-1.0

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

Danke.

Answer 1

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

Navigieren Sie zu about:config. (Klicken Sie auf "Akzeptieren", wenn Sie mit den erweiterten Funktionen vorsichtig sein möchten.)

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

Es war etwas implementiert in Firefox 22.

Answer 2

Setzen Sie es auf 1,25: Das vergrößert die Benutzeroberfläche, setzt die Website jedoch auf 100% Pixel-Mapping zurück.

Answer 3

Sie könnten leicht Ihren Website-Adresse eines Benutzer mit Einstellungen bei höheren Zoomstufen, indem eine Medium Abfrage wie lassen:

@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; 
    } 
} 

this article for an extended explanation Sehen und warum die gereinigte Lösung der Abfrage Medien ist ausreichend für einen breiten Browser Unterstützung: IE9 +, Fx3.5 +, Opera9.5 +, Webkit Browser Chrome und Safari, sowohl Desktop als auch Mobile.

Answer 4

Sie könnten etwas wie das unten versuchen. Es gibt einige Vorbehalte, die dies verwenden, aber für einige Situationen lohnt es sich, 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%;} 
} 

kommentiert /*body....*/ Beispiel Maßstab leichter sein kann, noch schlimmer, zu verstehen, F. E. weil Skalierung sollte basierend auf Transform-Herkunft css Regel oben links Rand erfolgen. Dann können Dinge besonders in Chrome besser gemacht werden.

Wenn Sie width: 125% verwenden, sollte Ihr RWD css anders reagieren als die Größe des Browsers ändern, und zwar aufgrund dessen, was Sie erwartet haben, als das Bildschirmverhältnis 100% betrug. Und Sie können dies vernünftigerweise akzeptieren - das ist RWD und der Unterschied ist 25%. Aber einige Leute könnten ihre CSS wie folgt anpassen möchten:

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

müssen Sie auch einstellen:

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

wahrscheinlich nicht 1250px aber 800px wie ich es tat.

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

Es gibt einige Probleme in FF (nicht Kante, Chrom) beim Erweitern von Auswahlfeldern - Lösung CSS wählen. Einige Ränder können sichtbar sein einige verschwinden auf FF (vielleicht nicht Kante, Chrom)

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

Aber ich denke, es ist eine größere Wahrscheinlichkeit, mehr Zeit mit diesem getesteten Beispiel noch zu wenig zu sparen.

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

Ich habe festgestellt, dass beim Umschalten auf verschiedene dpi-Auflösungen mit Strg +/i in einem Desktop-Browser und sicher mit Multitouch-Gesten in mobilen Browsern, ein Browser auch dpi ändert, so dass jede Lösung mit @media min/max-Auflösung kann funktioniert nicht wie erwartet. Was in CSS benötigt wird, ist Systemauflösung zu lesen, kein Browser. Allerdings, wie ich sehe, diese Änderung findet nicht statt, wie wenn jemand die Größe des Browsers manuell ändert oder ein mobiles Gerät dreht.

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