Ich habe eine mobile Website, die jQuery Mobile nutzt, aber die Bilder sehen offen aus wie Mist auf dem iPhone 4 / 4S. Ich nehme an, dass das gleiche für das "neue iPad" gehen wird, wenn es später diese Woche verfügbar ist.
Ich weiß, dass das etwas mit dem Pixelverhältnis und / oder Bild-DPI zu tun hat (oder PPI oder wie immer man es nennen will ... lass uns darüber nicht diskutieren). Ich möchte einfach wissen, welche Methode am besten geeignet ist, hochauflösende Web-Bilder für diese iOS-Retina-Displays bereitzustellen.
Zuerst dachte ich, das Ändern des DPI-Bildes (in Photoshop) würde das Problem lösen. Ich nahm einige Beispielbilder und skalierte sie auf eine Breite von 190px. Ich speicherte ein Bild bei 72 DPI und das andere bei 200 DPI. Dies hatte keine Wirkung. Sehen Sie selbst (auf einem iPhone 4 / 4S): Ссылка Das untere Bild von jedem ist das 200 DPI eins. p>
Anstatt das Hi-Res-Bild bei 200 DPI zu speichern, speicherte ich es erneut bei 72 DPI, aber dieses Mal vergrößerte ich die Breite (auf 528 Pixel), so dass es bei einer Verkleinerung auf eine Breite von 190 Pixeln bei ~ lag 200 DPI. Dies schien den Trick zu machen: Ссылка Wenn Sie die Quelle sehen, können Sie sehen, dass ich eine Breite / Höhe auf der Bild-Tags ( <img src="w4.jpg" alt="" width="190" height="143"> ).
Ich bin jedoch nicht überzeugt, dass dies die beste Lösung ist. Verwenden Sie die width / height-Attribute nicht, um die Leistung beim Rendern von Bildern zu skalieren, da das Gerät das Bild skalieren muss, anstatt es nur zu laden (und es nicht weiter zu berühren)?
Nach einigen Nachforschungen sieht es so aus, als gäbe es CSS-Medienabfragen wie -webkit-min-device-pixel-ratio [1], wo Sie unterschiedliche CSS für Hi-Res-Displays verwenden können und daher Bilder mit höherer Auflösung im CSS laden. Aber ich muss auf HTML <img> -Tags zielen. Ein anderer Artikel, den ich gelesen habe (den Link leider verloren), schlug vor, Javascript zu verwenden, um die "normalen" Bilder mit hochauflösenden zu ersetzen. Das klingt einfach verrückt!
Gibt es einen besseren Weg? Mir ist klar, dass die Meinungen darüber abweichen können, welcher der "beste" Weg ist. Wenn die Vor- / Nachteile jeder Methode erklärt werden könnten, wäre das großartig! Mein Ziel ist es, die schnellste Methode zu verwenden (hoffentlich ohne Hacky-Javascript usw.).
Danke!
[1] Ссылка
Sie müssen irgendeine Form von js als Lösung ausführen. Dasjenige, das im Moment benutzt wird, ist eins von mat wilcox. Es wird das richtige Bild auf dem Bildschirm dienen. Das große Plus für diese Lösung ist, dass die Bilder zwischengespeichert werden, um die Belastung der Benutzer zu reduzieren.
Es gibt einen Push, um ein neues Bild-HTML-Element einzubringen, das mehrere Quellen braucht, um dieses Problem zu lösen, aber es ist noch weit weg.
Für Bild-Tags habe ich dir schon eine eigene Lösung gegeben. Der große Vorteil ist, senden Sie ein und dasselbe Bild für alle Kunden.
Können Sie bei CSS-Bildern nicht dasselbe tun? Vergessen Sie die klobige -webkit-min-device-pixel-ratio , die jedes Mal ein anderes Bild erfordert, wenn sie ein neues Gerät kochen. Sende einfach das größte Bild und benutze CSS3 background-size , um es zu verkleinern. Ich habe das nicht getestet. IE & lt; 9 wird Ihnen ein Problem bereiten.
Ich bin, wahrscheinlich wie Sie, betäubt html / css bietet keine geeignete Methode, dies noch zu tun, nur solche hacky Workarounds. Ich bin auch, wie Sie, verwirrt, warum die Browser nicht nur an die Bilder DPI-Info halten. Wenn jemand weiß, Kommentare sind willkommen.
Gibt es einen besseren Weg, dies zu tun?
Ja, vermeiden Sie die Verwendung von Bitmap-Bildern. Verwenden Sie SVG.
Tags und Links html ios image retina-display resolution