Bagaimana Anda menangani zoom browser klien?

Saya punya banyak gambar di halaman, galeri. Saya ingin gambar tetap tajam, jadi saya tidak melakukan penskalaan browser, saya menggunakan dimensi asli gambar.

Namun, ini hanya berfungsi ketika tingkat pembesaran browser 100%. Saat saya menambah atau mengurangi level zoom, kualitas gambar menurun.

Beberapa klien sebenarnya memiliki level zoom yang berbeda secara default. Saya bertanya-tanya, bagaimana Anda bisa menanganinya dan apakah kami menanganinya?

Tepuk tangan

Saya pikir sebagian besar jawaban lain telah melewatkan intinya: ini bukan tentang mengesampingkan preferensi pengguna, ini tentang memberikan gambar berkualitas terbaik dalam skenario umum perangkat pengguna yang menetapkan lebih dari satu piksel fisik untuk setiap piksel CSS alias " Pixel referensi "pada gambar Anda, menghasilkan browser yang memperbesar gambar, menjadikannya pixelated dan berbintik.

Solusi yang saya sarankan di bawah ini, tetapi pertama-tama inilah empat cara ini bisa terjadi:

• Paling jarang: pengguna memilih untuk memperbesar . Bukan masalah besar, karena itu pilihan mereka.
• Sangat umum: browser pengguna diperbesar secara default . Misalnya, banyak mesin Windows dengan kerapatan piksel tinggi diperbesar hingga 125% atau lebih secara default, dan Firefox baru-baru ini (membingungkan!) Membuatnya jadi dalam kasus ini ia memberi tahu pengguna mereka diperbesar hingga 100% ketika mereka benar-benar diperbesar hingga 125% , meninggalkan mereka menggaruk-garuk kepala mereka bertanya-tanya mengapa semuanya tiba-tiba terlihat berbintik.
• Sangat umum: sebagian besar perangkat Android (dan perangkat lain?) Memiliki rasio piksel lebih besar dari 1. Ini berarti bahwa setiap "piksel CSS" benar-benar ditampilkan menggunakan lebih dari satu piksel fisik - jadi 200px x 200px gambar yang diatur untuk width: 200px; height: 200px;akan benar-benar skala gambar 200px x 200px di lebih dari 200 x 200 piksel, berpotensi menjadikannya buram.
• Sangat umum: banyak perangkat Apple modern memiliki " tampilan retina ". Ini pada dasarnya sama dengan perangkat Android dengan rasio piksel 2, tetapi dengan pemasaran yang lebih baik, dan beberapa properti khusus yang memungkinkannya dideteksi dengan nama.

Semua ini akan menghasilkan masalah John pada galeri gambar yang tampak sangat kasar.

Saya berharap seseorang akan memiliki solusi yang bagus untuk masalah ini, tetapi untuk sekarang di sini adalah pilihan pilihan saya, dimulai dengan yang paling efektif tetapi paling tidak mungkin secara universal:

1. Jika memungkinkan, buka vektor - SVG (atau Raphael.js jika Anda masih perlu mendukung IE8). Secara realistis, ini hanya pilihan untuk ikon, diagram dll, dan itu tidak pernah menjadi pilihan untuk foto. SVG yang sangat kompleks juga bisa kikuk pada ponsel low-end karena proses yang diperlukan.
2. Jika memungkinkan, deteksi rasio piksel perangkat, dan sajikan gambar berdasarkan itu. Ini juga dapat menyelesaikan masalah Firefox pada Windows karena Firefox pada Windows mengubah pembacaan rasio pikselnya ketika diperbesar dan diperbesar. Kelemahannya, ini menjadi masalah pengkodean rumit yang melibatkan pengembangan pekerjaan di sisi server dan klien.

3. Jika 1. dan 2. tidak dimungkinkan, tetapi ini sangat penting dan kualitas gambar lebih penting daripada, katakanlah, waktu buka, cukup gandakan gambar.

   • Inilah yang dilakukan Google dengan logo mereka di beranda mereka: mereka menekan gambar PNG 538px x 190px dalam wadah 269px x 95px. Ini juga kurang lebih sama dengan cara kerja gambar responsif.

   • Ini dulunya dianggap praktik buruk karena versi lama IE mengerikan dalam menurunkan gambar, tetapi sekarang sangat jarang digunakan dan jauh lebih jarang daripada layar dengan kepadatan piksel tinggi. Ini masih agak tidak diinginkan karena akan meningkatkan ukuran gambar dan karenanya menambah waktu pengambilan - itu adalah pertukaran yang Anda perlukan untuk menilai kasus per kasus.

   • Menggandakan ukuran adalah umum karena sangat sedikit perangkat yang memiliki rasio lebih dari 2, sangat sedikit pengguna diperbesar lebih dari 200%, dan penskalaan gambar 50% lebih bersih daripada jumlah lainnya.
4. Jika 1, 2 tidak mungkin dan waktu muat terlalu tinggi untuk 3, saya tidak mengetahui opsi lain, dan rekomendasi saya adalah jangan khawatir, karena setengah situs di internet memiliki masalah yang sama , dan orang-orang dengan masalah ini di situs Anda juga akan memiliki masalah ini di situs lain. Sial, Firefox di Windows bahkan menggandakan tombol UI sendiri ...

Sebagai DA01 berkomentar Anda tidak boleh melakukan apa-apa tentang itu.

Zoom adalah opsi yang ditentukan pengguna dan karenanya berada di bawah kendali mereka. Pengaturan yang mereka putuskan untuk diacaukan bukanlah tanggung jawab Anda.

Anda dapat memperhitungkan berbagai browser dan versi dan apa yang tidak, tetapi secara wajar Anda tidak harus memperhitungkan zoom pengguna.

Tentu Anda dapat mencapai 125% atau 150% (dan Anda bahkan mungkin tidak harus melakukannya). Tetapi 200%, 300%, lebih banyak? Itu tidak masuk akal.

Bagaimana jika pengguna menggunakan tema windows kontras tinggi? Bagaimana jika mereka terus menggunakan kaca pembesar? Siapa peduli?

Idealnya situs web Anda cukup fleksibel sehingga tidak membuat perbedaan nyata antara perbedaan zoom kecil, tetapi kualitas gambar akan menurun dengan zoom tetapi itu bukan tanggung jawab Anda.

Ini tentu saja hanya pendapat saya tetapi perusahaan tempat saya bekerja juga secara eksplisit memberi tahu pelanggan bahwa kami tidak mendukung preferensi zoom mereka.

Orang lain telah memberikan beberapa tips hebat tentang masalah yang akan Anda hadapi dan saya tidak cukup baik di bidang ini untuk melakukan tutorial yang baik tetapi ...

Anda mungkin ingin merancang situs responsif yang menyesuaikan sesuai dengan res / perangkat pengguna dan kemudian Anda mungkin mencari kode yang akan mengalihkan gambar ke file res yang lebih tinggi atau lebih rendah ketika diminta, daripada meregangkan dan meremas gambar yang Anda miliki.

Ketika saya terakhir mencoba melakukan ini, saya menggunakan media-query.js dan picturefill.js. Lihat: http://responsivedesign.is/resources/images/picture-fill . Saya memiliki tata letak 3 kolom di mana beberapa gambar akan menjangkau dua kolom ... Ketika jendela browser dibuat cukup kecil, gambar besar akan beralih ke versi res yang lebih kecil yang hanya akan menjadi satu lebar kolom. Browser pengguna hanya akan memuat versi file yang mereka butuhkan. (dan dalam kasus saya, plugin pasangan batu akan memindahkan semuanya untuk mengakomodasi).

Tentu saja pengguna Anda harus mengaktifkan javascript ...

Anda tidak bisa memaksa tangan pengguna. Pengaturan pengguna bukan milik Anda untuk bermain. Pengaturan dan mengelak dari mereka adalah ide yang buruk mungkin ada alasan mengapa pengguna melakukan sesuatu. Dalam kedua kasus Anda tidak dapat menjamin apa pun di berbagai perangkat.

Bahkan jika Anda masuk ke sisi teknis, itu menjadi lebih menarik. Anda benar-benar memberikan kunci kerajaan dengan halaman web Anda. Lihat pengguna mengunduh halaman web dan pengguna sekarang dapat melakukan apa pun yang mereka suka dengannya. Anda tidak memiliki kontrol atas lapisan ini, ini setelah semua berjalan di mesin pengguna dan mereka dapat melakukan apa pun yang mereka mau. Bahkan stackexhange tidak terlihat sama di komputer / ponsel saya seperti pada Anda. Saya mengubah beberapa aspek GUI pada akhirnya secara otomatis, untuk memperbaiki 2 render bug dan telah menambahkan 2 pintasan.

Perilaku menjengkelkan peningkatan gambar pada layar HiDPI, yang mengarah pada foto buram (alias mimpi buruk fotografer), juga telah mengganggu saya selama beberapa waktu. Saya juga bertanya-tanya bahwa tidak ada atribut CSS sederhana untuk menonaktifkannya untuk gambar.

Solusi saya saat ini dengan CSS terlihat seperti ini:

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

Langkah selanjutnya adalah menggunakan kelas untuk menentukan dan mengatur ukuran gambar yang berbeda jika diperlukan. Saya tidak tahu cara untuk mendapatkan ukuran gambar secara dinamis. Fungsi CSS attr () tampaknya tidak berfungsi untuk ini.

Jadi ini akan lebih merupakan pertanyaan pemrograman. Tetapi menggunakan JQuery, atau bahkan hanya pesawat css Anda dapat menampilkan gambar yang berbeda berdasarkan lebar layar pengguna, tinggi layar dan sebagainya.

Sekali lagi meskipun ini mungkin bukan stackexchange untuk bertanya.

Anda cukup melakukan ini melalui HTML di kepala situs tambahkan ini

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

Ini tidak disarankan oleh pengembang untuk setiap jenis situs tetapi harus memenuhi apa yang Anda minta.

Semoga bisa membantu: css rule transform: skala pada tag tubuh atau lainnya - tidak sempurna lihat di sini, silakan:

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