Müşterinin tarayıcı yakınlaştırma özelliğini nasıl kullanıyorsunuz?

Bir sayfada bir galeride çok fazla resim var. Görüntülerin keskin kalmasını istiyorum, bu yüzden tarayıcı ölçeklemesi yapmıyorum, görüntünün orijinal boyutlarını kullanıyorum.

Ancak, bu yalnızca tarayıcı yakınlaştırma seviyesi% 100 olduğunda çalışır. Zum seviyesini arttırdığım veya azalttığımda, görüntülerin kalitesi düşüyor.

Bazı istemciler varsayılan olarak farklı yakınlaştırma seviyelerine sahiptir. Merak ediyordum, nasıl idare edersiniz ve biz nasıl idare edebiliriz?

Şerefe

Diğer cevapların çoğunun bu noktayı kaçırdığını düşünüyorum: bu, kullanıcı tercihlerini geçersiz kılmakla ilgili değil, her bir CSS pikseli için birden fazla fiziksel piksel atayan bir kullanıcının aygıtının ortak senaryosunda en iyi kalitede görüntüler vermeyle ilgili aka " Referans piksel "görüntünüzde tarayıcının görüntüyü ölçeklendirmesi, pikselli ve grenli olmasıyla sonuçlanır.

Aşağıda önerilen çözümlerim, ancak ilk önce bunun gerçekleşebileceği dört yol var:

• En nadir: kullanıcı yakınlaştırmayı seçer . Çok büyük bir problem değil, çünkü onların seçimi.
• Şaşırtıcı şekilde yaygın: kullanıcının tarayıcısı varsayılan olarak yakınlaştırılmıştır . Örneğin, birçok yüksek piksel yoğunluğundaki Windows makinesi varsayılan olarak% 125 veya daha fazlasına yakınlaştırılmış ve Firefox yakın zamanda (kafa karıştırıcı!) Yapmıştır, bu durumlarda, kullanıcılara% 125 oranında yakınlaştırıldıklarında% 100 oranında yakınlaştırdıklarını söyler neden başlarının tırmalandığını ve neden her şeyin birden grenli göründüğünü merak ederek bıraktılar.
• Çok yaygın: çoğu Android cihazı (ve diğer cihazlar?) 1'den daha büyük bir piksel oranına sahiptir. Bu, her "CSS pikseli" nin aslında birden fazla fiziksel piksel kullanılarak görüntülendiği anlamına gelir - yani 200 piksele 200 piksellik bir görüntü width: 200px; height: 200px;gerçekten ölçeklenecek 200 x 200 pikselden daha yüksek olan bu 200 piksel x 200 piksel görüntü, potansiyel olarak grenlidir.
• Çok yaygın: Birçok modern Apple cihazında " retina ekranlar " bulunur. Bu aslında piksel oranı 2 olan ancak daha iyi pazarlamaya ve ismiyle algılanmasına izin veren birkaç özel özelliğe sahip bir Android cihazla aynıdır.

Bunlardan herhangi biri, John'un şaşırtıcı derecede grenli görünen bir resim galerisi sorunuyla sonuçlanacaktır.

Birinin bu soruna harika bir çözümü olacağını umuyordum, ama şu anda tercih edilen seçeneklerim, en etkili fakat en az evrensel olarak mümkün olanlardan başlayarak:

1. Mümkünse vector - SVG (ya da hala IE8'i desteklemeniz gerekiyorsa Raphael.js) gidin. Gerçekçi olarak, bu sadece simgeler, diyagramlar vb. İçin bir seçenektir ve fotoğraflar için asla bir seçenek değildir. Çok karmaşık SVG, gerekli işlemlerden dolayı düşük uçlu cep telefonlarında da sıkışık olabilir.
2. Mümkünse, cihazın piksel oranını tespit edin ve buna göre görüntüler gönderin. Bu, Windows'ta Firefox sorununu da çözebilir, çünkü Windows'taki Firefox, yakınlaştırıp uzaklaştırırken piksel oranlarının okunmasını değiştirir. Dezavantajı, sunucu ve istemci tarafında geliştirme çalışmaları içeren zor bir kodlama problemi haline gelmesidir.

3. 1. ve 2. mümkün değilse, ancak bu gerçekten önemlidir ve görüntü kalitesi, yükleme süresinden daha önemlidir, yalnızca görüntüyü iki katına çıkarın.

   • Bu, Google’ın ana sayfasında logolarıyla yaptığı şeydir: 538px x 190px PNG görüntüsünü 269px x 95px'lik bir kapta sıkıştırırlar. Ayrıca, duyarlı görüntülerin çalışma şekliyle aşağı yukarı aynı.

   • Bu eskiden beri eski sürümlerin görüntüleri küçültmekte berbat olduklarından kötü bir uygulama olarak kabul edildiler, ancak bunlar artık çok nadiren kullanılıyor ve yüksek piksel yoğunluklu ekranlardan çok daha az yaygın. Görüntü boyutunu artıracağı ve bu nedenle yükleme süresini artıracağı için hala istenmeyen bir durum - bu durum bazında yargılamanız gereken bir takas.

   • İki kat daha büyüktür, çünkü çok az sayıda cihaz 2'den büyük bir orana sahiptir, çok az sayıda kullanıcı% 200'den daha fazla yakınlaştırılır ve görüntüleri% 50 oranında ölçeklendirme diğer miktarlardan daha temizdir.
4. 1, 2 mümkün değilse ve yükleme süreleri 3 için çok yüksek önceliğe sahipse, başka seçeneklerin farkında değilim ve önerim bu konuda endişelenmemektir, çünkü İnternet'teki sitelerin yarısı aynı sorunu yaşıyor ve sitenizde bu sorunu yaşayan kişiler de diğer sitelerde bu sorunu yaşayacak. Kahretsin, Windows'taki Firefox kendi UI düğmelerini bile pikselleştiriyor ...

DA01'in yorumladığı gibi bu konuda hiçbir şey yapmamalısınız.

Yakınlaştırma kullanıcı tarafından belirlenen bir seçenektir ve bu nedenle kontrolleri altındadır. Dağılmaya karar verdikleri ayarlar sizin sorumluluğunuzda olmamalıdır.

Farklı tarayıcıları ve sürümleri hesaba katabilirsiniz ve neyin olmasın, ancak makul bir şekilde konuşursanız, kullanıcının yakınlaştırmasını hesaba katmamalısınız.

Tabii% 125 veya% 150 (belki de yapmak zorunda kalmayabilirsiniz) olabilir. Fakat% 200,% 300, daha fazla? Sadece bir anlam ifade etmiyor.

Kullanıcı yüksek kontrastlı pencereler temasını kullanıyorsa? Ya sürekli büyüteç kullanıyorlarsa? Kimin umrunda?

İdeal olarak web siteniz, küçük zum farkları arasında gerçek bir fark yaratmayacak kadar esnektir, ancak görüntüler zum ile kaliteyi düşürür ancak bu sizin sorumluluğunuzda değildir.

Elbette bu sadece benim görüşüm ama çalıştığım şirket de müşterilere yakınlaştırma tercihlerini desteklemediğimizi açıkça söylüyor.

Diğer insanlar, karşılaşacağınız problemler hakkında harika ipuçları verdiler ve bu alanda iyi bir eğitim yapacak kadar iyi değilim.

Kullanıcının res / cihazına göre ayarlayan duyarlı bir site tasarlamak isteyebilir ve daha sonra, sahip olduğunuz görüntüleri genişletmek ve sıkmak yerine, talep edildiğinde görüntüleri daha yüksek veya daha düşük res dosyalarına geçirecek bir kod arıyorsunuz.

Bunu son denediğimde, media-query.js ve picturefill.js dosyalarını kullandım. Bakınız: http://responsivedesign.is/resources/images/picture-fill . Bazı görüntülerin iki sütuna yayılacağı 3 sütun düzenim vardı ... Tarayıcı penceresi yeterince küçük yapıldığında, büyük görüntüler yalnızca bir sütun genişliğinde olan daha küçük bir res sürümüne geçerdi. Kullanıcının tarayıcısı, sadece ihtiyaç duydukları dosyanın sürümünü yükler. (ve benim durumumda, duvar eklentisi her şeyi yerleştirmek için hareket ettirirdi).

Tabii ki o zaman kullanıcı javascript etkin olmalı ...

Kullanıcıların elini zorlayamazsın. Kullanıcı ayarları, oynamak için size ait değildir. Ayarlar ve onları atlamak kötü bir fikir, kullanıcının bir şey yapmasının bir nedeni olabilir. Her iki durumda da, çeşitli cihazlar arasında hiçbir şey garanti edemezsiniz.

Aslında teknik tarafa girerseniz daha da ilginç hale gelir. Web sayfanla gerçekten Krallığın anahtarlarını veriyorsun. Kullanıcının web sayfasını indirdiğini görün ve kullanıcı istediği her şeyi yapabilir. Bu katman üzerinde kontrol sahibi değilsiniz, kullanıcı makinede çalışan tüm işlemlerden sonra ve lütfen ne isterlerse yapabilirler. Stackexhange bile bilgisayarımda / cep telefonunda sizinkilerle aynı görünmüyor. GUI'nin bazı yönlerini otomatik olarak, 2 oluşturma hatasını düzeltmek ve 2 kısayol eklemek için otomatik olarak değiştiriyorum.

Bulanık fotoğraflara (yani fotoğrafçıların kabusu) yol açan HiDPI ekranlarında görüntülerin büyütülmesinin sinir bozucu davranışı da beni bir süre rahatsız etti. Ayrıca, görüntüleri engellemek için basit bir CSS özelliğinin olmadığını da merak ettim.

CSS ile şu andaki çözümüm şöyle görünüyor:

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

Bir sonraki adım, gerekirse farklı görüntü boyutlarını tanımlamak ve ayarlamak için sınıfları kullanmak olacaktır. Görüntü boyutlarını dinamik olarak almanın bir yolunu bilmiyorum. CSS İşlevi attr () bunun için çalışmıyor gibi görünüyor.

Yani bu bir programlama sorusu daha fazla olurdu. Ancak JQuery, hatta sadece css düzlemini kullanarak kullanıcıların ekran genişliğine, ekran yüksekliğine ve buna bağlı olarak farklı görüntüler görüntüleyebilirsiniz.

Yine de, bu muhtemelen sorulacak yığının değişmesi değildir.

Bunu sitenin başındaki HTML yoluyla kolayca yapabilirsiniz

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

Bu, geliştiriciler tarafından her tür site için önerilmemektedir, ancak istediğinizi yerine getirmelidir.

Yardımcı olur umarım: css kural dönüşümü: vücut etiketi veya başka ölçek ölçek - burada görmek mükemmel değil, lütfen:

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