Soru Retina ekranı olmadan Windows'da Retina için bir web sitesi nasıl test edilir?


Retina gibi HiDPI ekranları için bir web sitesini test etmek için Windows'da Retina ekranını simüle etmenin bir yolu var mı?

Pencereyi standart 24 "1920x1080 monitörde çalıştırıyorum. Dün gece websitemde 15 yeni bir arkadaşımla ilgili bir web sitesine baktım" Retina MacBook Pro ve grafikler bulanıkken (normal 15 inçlik MacBook'dan çok daha kötü) grafikler vardı. Süper net ve keskin, logonun doğrudan karşılaştırma nedeniyle daha da kötü görünmesini sağlar.

Web sitemi Retina'ya hazırlamak için bu eğiticiyi takip ettim:

http://line25.com/tutorials/how-to-create-retina-graphics-for-your-web-designs

Herhangi bir arka plan resmim olmadığından retina.js yaklaşımını kullandım.

Bunun gerçekten işe yarayıp yaramadığını test etmenin bir yolu var mı? Açıkçası, arkadaşımın Retina Defterini kullanmasını isteyebilirdim ama bu benim için uygun bir iş akışı değil. En azından kabaca Retina için web sitelerini kendi ortamımda test edebilmek istiyorum.


76
2018-03-21 15:11


Menşei


Yardımcı olabilir: stackoverflow.com/questions/12243549/... - JSuar
@Jsuar: Ne yazık ki değil. JavaScript kütüphanesi retina.js ile çalışmıyor gibi görünüyor ve Opera mobil şeyler için görünüyor. - Alexander Rechsteiner
Logonuz gibi tüm görüntüleri png veya jpg yerine SVG'de yapmaya çalışın. - Seph


Cevaplar:


hakkında: Firefox'ta config hack

Aslında Firefox'u kullanabilirsiniz:

  1. "About: config" sayfasına git
  2. "Layout.css.devPixelsPerPx dosyasını bulun
  3. İstediğiniz oranda değiştirin (normal için 1, retina için 2, vs. Varsayılan olarak görünüyor).

Ekran görüntüsü:

Sayfanızı yenileyin - bom, artık medya sorgunuz başladı! Web geliştirmek için harika olmak için Firefox'a şapka! Heads up, sadece şimdi web sitesi boyutu iki katına yükseltilecek, aynı zamanda Firefox UI iki katına çıkacak. Bu ikiye katlama veya yakınlaştırma gereklidir, çünkü bu, standart piksel oranı ekranında tüm pikselleri inceleyebilmenizin tek yoludur.

Bu, Firefox 21.0 ile birlikte Windows 7 ve Firefox 27.0.1 ile Mac OS X'te iyi çalışıyor.

Medya sorguları ve diğer daha gelişmiş mantık kullanmıyorsanız (yani, herkese HiDPI görüntülerini besliyorsanız), tarayıcınızla% 200'e yakınlaştırabilirsiniz. Chrome öykünmesi, medya sorgusuyla başladığı kadar yararlı bir araçtır, ancak yakınlaştırmayı engellediği için resim kalitesini inceleyemezsiniz.

Firefox ve Edge üzerinde yakınlaştırma

Şu anda Firefox ve Edge'de, yakınlaştırırsanız dppx tabanlı medya sorgularını tetikler. Bu kolay yaklaşım yeterli olabilir, ancak işlevselliğin bir "düzeltmeyecek" olarak bildirildiğini unutmayın. böcek Firefox için, bu değişebilir.


146
2018-06-21 05:17



Herkes biliyor mu, Chrome için benzer bir şey var mı? - Krzysztof Romanowski
@castus Öyle düşünmeyin, elinizdeki en iyisi yakınlaştırmak ve bence bu medyadaki soruları cevaplamıyor. - andrewb
@andrewb: İsmimi güçlendiren aynı şeyi merak ettim (yay!). Belki de sık arama terimi için Google'da dizine eklenmiştir. - Alexander Rechsteiner
@AlexanderRechsteiner Aslında Smashing Magazine'in Facebook sayfasıyla bağlantı kurdu ve Facebook çevresinde pek çok kişi tarafından paylaşıldı. Cevabımı kabul ettiğin için teşekkürler! - andrewb
Firefox ile Mac'te yapılabilir mi? - Christina


Google Chrome sürümünde "33.0.1720.0 Canary", şimdi yapabilirsiniz iPhone5 ve diğerleri gibi cihazları "Cihaz piksel oranı", "android font metrikleri" ve "Viewport öykünmesi" gibi harika parametrelerle taklit edebilirsiniz.

Artık Firefox’un hacklenmesine gerek yok - yine de çalışılması zor.

Teşekkürler Google dev ekibi! ! :)


24
2017-11-27 10:48



MediaQueries'e bakmadım, ancak sadece görüntü kalitesini gözden geçirme açısından, bunun nasıl faydalı olduğunu görmüyorum. X2 piksellerini artırmanız gerekir, aksi halde hangi içeriğin Retina'ya hazır olduğunu ve hangilerinin görünmediğini görsel olarak göremezsiniz. Hızlı bir test yaptım ve Chrome, google.com web sitesinin küçük görünmesini sağladı, ancak Firefox'a gittiğinde, Google Doodle'ın şu anda Retina piksel yoğunluğu olmadığını keşfettim. Ama hey, eğer bu insanlar için işe yararsa, Firefox konfigürasyonu ile çılgın büyük kullanıcı arayüzünü atlamak demektir! - andrewb
Evet, buradaki nokta, görüntü kalitesini arttırmak değil (fiziksel ekran aynı piksel yoğunluğuna sahip olduğu için imkansızdır), ancak Retina Mac olmadan bir geliştirici olarak, tüm üsleri hâlâ koruyorsunuz. - Urb Gim Tam
Sadece görüntü kalitesini gözden geçirmek istiyorsanız, hiçbir şey yapmanıza gerek kalmaz, ancak tarayıcınızı% 200 yakınlaştırırsınız. Chrome'da medya sorguları çalıştırmak istiyorsanız, ikisini de yapmalısınız: zum ve öykünme. - Michael McGinnis
@MichaelMcGinnis Chrome'la taklit edip yakınlaştıramıyorum, yapabildiniz mi? - andrewb
Evet @andrewb, ayrı testler olması gerektiği gibi görünüyor. Yakınlaştırdığımda ve taklit ettiğimde, görüntüler tekrar küçülür. Taklit ederken yakınlaştırma, görüntü boyutlarını etkilemez. - Michael McGinnis


Kromda bunu yapabilirsiniz:

1) Chrome Geliştirici Araçları'nı açın ve küçük "dişli" simgesini tıklayın. enter image description here


2) Ardından konsol çekmecesinde "Emülasyonu Göster" görünümünü seçin. " enter image description here


3) Son olarak, Geliştirici Araçları'nda "konsol çekmecesini" açın ve emülasyon. Set Ekranı öykün ve ayarla Cihaz Piksel Oranı 2.5'e.

enter image description here


13
2018-04-22 23:04





Anlayabildiğim kadarıyla, bir retina cihazı almak dışında mümkün değil.

Bazı geçici çözümler

Daha Az İlgili


10
2018-03-21 16:59



Teşekkürler, developer.apple.com'dan gelen mermi noktası beni doğru yolda buldu. Olduğu gibi buradaki diğer cevap Yığın Taşması. - Alex Kendrick


Google Chrome ile Retina (HiDPI) Ekranı Emülasyonu İçin Geçerli Yöntem

1) "Sağ tık"web sayfasında daha sonra seç"denetlemekChrome'un Geliştirici Araçlarını Açmak

2) Tıkla "Cihaz Modunu Değiştir"Simge

Click the Toggle Device Mode Icon

3) Ekranın üstündeki Cihaz Açılır kutusunda, "HiDPI Ekranlı Dizüstü Bilgisayar"

Select Laptop with HiDPI Screen

4) Artık web sitesinin Retina aka HiDPI ekranında nasıl görüneceğini görebilirsiniz.


7
2018-03-10 11:06





Görüntüleri dinamik olarak oluşturmak için bir görüntü yeniden boyutlandırma kitaplığı kullanıyorum. 2x sürümü için hata ayıklama sırasında dinamik bir filigran ekliyorum - bu, yüksek çözünürlüklü görüntünün gerçekten gösterilip gösterilmediğini görmeyi çok kolaylaştırıyor. Çok yardımcı bulduk.

Çalışma şekli, örnek kod dahil edilmeyecek şekilde değişecektir.


0
2017-11-21 23:18





Bunun çok basit olup olmadığını bilmiyorum, ctrl ve kaydırma tuşlarına basıyorum ve medya sorgusunu tetikliyor. Bugzilla'da kontrol ettim ve işe yarıyor. Svg ölçekleme hakkında bulanık göründüğünden emin değilim, ama svg görüntüdür.


-1
2017-09-24 17:33



Hangi tarayıcıyı veya donanımı kullanıyorsunuz? Bugzilla yerine Mozilla mı demek istiyorsun? - Michael McGinnis