Wie gehen Sie mit dem Browserzoom des Kunden um?

Ich habe viele Bilder auf einer Seite, einer Galerie. Ich möchte, dass die Bilder scharf bleiben, damit ich keine Browser-Skalierung vornehme. Ich verwende die ursprünglichen Abmessungen des Bildes.

Dies funktioniert jedoch nur, wenn die Zoomstufe des Browsers 100% beträgt. Wenn ich die Zoomstufe vergrößere oder verkleinere, nimmt die Qualität der Bilder ab.

Einige Clients haben standardmäßig unterschiedliche Zoomstufen. Ich habe mich gefragt, wie Sie damit umgehen können und ob wir überhaupt damit umgehen?

Prost

Ich denke, die meisten anderen Antworten haben den Punkt verfehlt: Hier geht es nicht darum, die Benutzereinstellungen zu überschreiben, sondern darum, Bilder mit der besten Qualität in dem üblichen Szenario zu liefern, in dem dem Gerät eines Benutzers mehr als ein physisches Pixel für jedes CSS-Pixel, auch bekannt als " Referenzpixel ", zugewiesen wird "in Ihrem Bild, was dazu führt, dass der Browser das Bild vergrößert, pixelig und körnig macht.

Meine Lösungsvorschläge unten, aber zuerst hier sind die vier Möglichkeiten, wie dies passieren kann:

• Am seltensten: Der Benutzer wählt das Vergrößern . Kein so großes Problem, da es ihre Wahl ist.
• Überraschend häufig: Der Browser des Benutzers wird standardmäßig vergrößert . Beispielsweise werden viele Windows-Computer mit hoher Pixeldichte standardmäßig auf 125% oder mehr gezoomt, und Firefox hat dies kürzlich (verwirrenderweise!) So eingestellt, dass in diesen Fällen angegeben wird, dass die Benutzer auf 100% gezoomt werden, wenn sie tatsächlich auf 125% gezoomt werden. Sie kratzen sich am Kopf und wundern sich, warum plötzlich alles körnig aussieht.
• Sehr häufig: Die meisten Android-Geräte (und andere Geräte?) Haben ein Pixelverhältnis von mehr als 1. Dies bedeutet, dass jedes "CSS-Pixel" tatsächlich mit mehr als einem physischen Pixel angezeigt wird - ein 200 x 200 Pixel großes Bild width: 200px; height: 200px;wird also tatsächlich skaliert das 200 x 200 Pixel große Bild über mehr als 200 x 200 Pixel, wodurch es möglicherweise körnig wird.
• Sehr häufig: Viele moderne Apple-Geräte verfügen über " Retina-Displays ". Dies ist im Wesentlichen dasselbe wie bei einem Android-Gerät mit einem Pixelverhältnis von 2, jedoch mit besserer Vermarktung und einigen benutzerdefinierten Eigenschaften, mit denen es anhand des Namens erkannt werden kann.

All dies führt zu Johns Problem, dass eine Bildergalerie überraschend körnig aussieht.

Ich hatte gehofft, dass jemand eine großartige Lösung für dieses Problem finden würde, aber hier sind meine bevorzugten Optionen, beginnend mit den effektivsten, aber am wenigsten universellen Möglichkeiten:

1. Wenn möglich, gehen Sie zu vector - SVG (oder Raphael.js, wenn Sie noch IE8 unterstützen müssen). Realistisch gesehen ist dies nur eine Option für Symbole, Diagramme usw. und niemals eine Option für Fotos. Sehr komplexes SVG kann aufgrund der erforderlichen Verarbeitung auch auf Low-End-Mobiltelefonen problematisch sein.
2. Ermitteln Sie nach Möglichkeit das Pixelverhältnis des Geräts und liefern Sie die darauf basierenden Bilder. Dies kann auch das Problem mit Firefox unter Windows lösen, da Firefox unter Windows das Lesen der Pixelverhältnisse ändert, wenn es vergrößert oder verkleinert wird. Der Nachteil ist, dass es zu einem kniffligen Codierungsproblem wird, bei dem auf Server- und Clientseite Entwicklungsarbeit anfällt.

3. Wenn 1. und 2. nicht möglich sind, es aber wirklich wichtig ist und die Bildqualität wichtiger ist als zum Beispiel die Ladezeit, verdoppeln Sie einfach das Bild.

   • Dies ist, was Google mit seinem Logo auf seiner Homepage macht: Sie zerdrücken ein 538 x 190 Pixel großes PNG-Bild in einem 269 x 95 Pixel großen Container. Es ist auch mehr oder weniger so, wie reaktionsschnelle Bilder funktionieren.

   • Früher galt dies als schlechte Praxis, da alte Versionen des Internet Explorers beim Verkleinern von Bildern schrecklich waren. Diese werden heute jedoch nur noch sehr selten verwendet und sind weitaus seltener als Bildschirme mit hoher Pixeldichte. Es ist immer noch etwas unerwünscht, da es die Bildgröße und damit die Ladezeit erhöht - das ist ein Kompromiss, den Sie von Fall zu Fall beurteilen müssen.

   • Das Verdoppeln der Größe ist üblich, da nur sehr wenige Geräte ein Verhältnis von mehr als 2 haben, nur sehr wenige Benutzer mehr als 200% vergrößert haben und das Skalieren von Bildern um 50% sauberer ist als andere Beträge.
4. Wenn 1, 2 nicht möglich sind und Ladezeiten für 3 eine zu hohe Priorität haben, sind mir keine anderen Optionen bekannt, und ich empfehle, mir keine Sorgen zu machen, da die Hälfte der Websites im Internet das gleiche Problem hat Personen mit diesem Problem auf Ihrer Website haben dieses Problem auch auf anderen Websites. Hölle, Firefox unter Windows pixelet sogar seine eigenen UI-Buttons ...

Wie DA01 kommentierte , sollten Sie nichts dagegen unternehmen.

Der Zoom ist eine benutzerdefinierte Option und wird daher von ihnen gesteuert. Die Einstellungen, mit denen sie sich anlegen, sollten nicht in Ihrer Verantwortung liegen.

Sie können verschiedene Browser und Versionen berücksichtigen und was nicht, aber vernünftigerweise sollten Sie den Zoom eines Benutzers nicht berücksichtigen.

Sicher können Sie 125% oder 150% ausmachen (und müssen es möglicherweise nicht einmal). Aber 200%, 300%, mehr? Das ergibt einfach keinen Sinn.

Was ist, wenn der Benutzer das kontrastreiche Windows-Design verwendet? Was ist, wenn sie ständig die Lupe benutzen? Wen interessiert das?

Idealerweise ist Ihre Website so flexibel, dass es keinen Unterschied zwischen kleinen Zoomunterschieden macht, aber die Qualität der Bilder nimmt mit dem Zoom ab, aber das liegt nicht in Ihrer Verantwortung.

Dies ist natürlich nur meine Meinung, aber das Unternehmen, für das ich arbeite, teilt den Kunden ausdrücklich mit, dass wir ihre Zoomeinstellungen nicht unterstützen.

Andere Leute haben einige großartige Tipps zu den Problemen gegeben, mit denen Sie konfrontiert werden. Ich bin in diesem Bereich nicht gut genug, um ein gutes Tutorial zu erstellen, aber ...

Möglicherweise möchten Sie eine reaktionsfähige Site entwerfen, die sich an die Auflösung / das Gerät des Benutzers anpasst, und dann suchen Sie wahrscheinlich nach Code, mit dem Bilder auf Anforderung in Dateien mit höherer oder niedrigerer Auflösung umgewandelt werden können, anstatt die vorhandenen Bilder zu strecken und zu komprimieren.

Als ich das letzte Mal versuchte, verwendete ich media-query.js und picturefill.js. Siehe: http://responsivedesign.is/resources/images/picture-fill . Ich hatte ein dreispaltiges Layout, bei dem einige Bilder zwei Spalten umfassen würden ... Wenn das Browserfenster klein genug wäre, würden die großen Bilder auf eine kleinere Res-Version umgestellt, die nur eine Spalte breit wäre. Der Browser des Benutzers lädt nur die Version der benötigten Datei. (und in meinem Fall würde das Maurer-Plugin alles verschieben, um es unterzubringen).

Natürlich muss Ihr Benutzer dann Javascript aktiviert haben ...

Sie können die Hand des Benutzers nicht erzwingen. Die Benutzereinstellungen gehören nicht Ihnen. Einstellungen und deren Umgehung sind eine schlechte Idee. Es kann einen Grund geben, warum der Benutzer etwas unternommen hat. In beiden Fällen können Sie für die verschiedenen Geräte keine Garantie übernehmen.

In der Tat, wenn Sie in die technische Seite gehen, wird es noch interessanter. Sie geben wirklich die Schlüssel zum Königreich mit Ihrer Webseite. Sehen Sie, wie der Benutzer die Webseite herunterlädt, und der Benutzer kann nun damit machen, was er will. Sie haben keine Kontrolle über diese Ebene, sie läuft immerhin auf dem Computer des Benutzers und er kann tun, was er will. Selbst stackexhange sieht auf meinem Computer / Handy nicht so aus wie auf Ihrem. Ich ändere einige Aspekte der Benutzeroberfläche automatisch, um zwei Rendering-Fehler zu beheben und zwei Verknüpfungen hinzuzufügen.

Das ärgerliche Verhalten beim Hochskalieren von Bildern auf HiDPI-Bildschirmen, das zu verschwommenen Fotos führt (auch bekannt als der Albtraum der Fotografen), hat mich auch schon seit einiger Zeit beunruhigt. Ich habe mich auch gefragt, dass es kein einfaches CSS-Attribut gibt, um dies für Bilder zu deaktivieren.

Meine aktuelle Lösung mit CSS sieht folgendermaßen aus:

@media only screen and (min--moz-device-pixel-ratio: 1.25),
    (-o-min-device-pixel-ratio: 5/4),
    (-webkit-min-device-pixel-ratio: 1.25),
    (min-device-pixel-ratio: 1.25) {
        img {
            --pic-width: 460px;
            width: calc(var(--pic-width) / 1.25 - var(--pic-width) + var(--pic-width));
        }
}
@media only screen and (min--moz-device-pixel-ratio: 1.5),
    (-o-min-device-pixel-ratio: 3/2),
    (-webkit-min-device-pixel-ratio: 1.5),
    (min-device-pixel-ratio: 1.5) {
        img {
            --pic-width: 460px;
            width: calc(var(--pic-width) / 1.5 - var(--pic-width) + var(--pic-width));
        }
}
@media only screen and (min--moz-device-pixel-ratio: 1.75),
    (-o-min-device-pixel-ratio: 7/4),
    (-webkit-min-device-pixel-ratio: 1.75),
    (min-device-pixel-ratio: 1.75) {
        img {
            --pic-width: 460px;
            width: calc(var(--pic-width) / 1.75 - var(--pic-width) + var(--pic-width));
        }
}
@media only screen and (min--moz-device-pixel-ratio: 2.00),
    (-o-min-device-pixel-ratio: 2),
    (-webkit-min-device-pixel-ratio: 2.00),
    (min-device-pixel-ratio: 2.00) {
        img {
            --pic-width: 460px;
            width: calc(var(--pic-width) / 2.00 - var(--pic-width) + var(--pic-width));
        }
}

Der nächste Schritt wäre die Verwendung von Klassen zum Definieren und Festlegen verschiedener Bildgrößen, falls erforderlich. Ich kenne keine Möglichkeit, die Bildgrößen dynamisch zu ermitteln. Die CSS-Funktion attr () scheint dafür nicht zu funktionieren.

Das wäre also eher eine Programmierfrage. Mit JQuery oder auch nur Flugzeug-CSS können Sie jedoch verschiedene Bilder basierend auf der Bildschirmbreite, Bildschirmhöhe usw. des Benutzers anzeigen.

Auch dies ist wahrscheinlich nicht der Stack-Exchange zu fragen.

Sie können dies einfach per HTML im Kopf der Seite hinzufügen

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Dies wird von Entwicklern nicht für jede Art von Website empfohlen, sollte jedoch die gewünschten Ergebnisse liefern.

Hoffe, es hilft: CSS-Regel transformieren: Skalieren auf Body-Tag oder andere - nicht perfekt, siehe hier, bitte:

/programming/23099849/stop-firefox-dpi-scaling-when-windows-setting-is-at-125/42755741#42755741