Retina için bir web sitesi gerçek bir Retina ekranı olmadan Windows'ta nasıl test edilir?

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

Windows'u standart bir 24 "1920x1080 monitörde çalıştırıyorum. Dün gece web sitemi yepyeni bir 15" Retina MacBook Pro arkadaşımda kontrol ettim ve grafikler tamamen bulanık görünüyordu (normal bir 15 inç MacBook'tan çok daha kötü). süper net ve keskin, doğrudan karşılaştırma nedeniyle logonun daha da kötü görünmesini sağlar.

Web sitemi Retina'ya hazır hale getirmek için bu öğreticiyi takip ettim:

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

Arka plan resmim olmadığı için retina.js yaklaşımını kullandım.

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

about: Firefox'ta config hack

Aslında Firefox kullanabilirsiniz:

1. "About: config" e gidin
2. "Layout.css.devPixelsPerPx'i bulun
3. İstediğiniz orana değiştirin (normal için 1, retina için 2, vb. -1 Varsayılan olarak görünür.)

Ekran görüntüsü:

Sayfanızı yenileyin - patlama, medya sorgunuz şimdi başladı! Web geliştirme için harika olduğu için Firefox'a şapka çıkartın! Dikkat edin, sadece web sitesi artık iki katına yükseltilmekle kalmayacak, Firefox kullanıcı arayüzü de iki katına çıkacak. Standart bir piksel oranı ekranındaki tüm pikselleri inceleyebilmenizin tek yolu bu olduğundan, bu iki katına çıkarma veya yakınlaştırma gereklidir.

Bu, Firefox 21.0 ile Windows 7'de ve ayrıca Firefox 27.0.1 ile Mac OS X'te iyi çalışır.

Medya sorgularını ve diğer daha gelişmiş mantığı kullanmıyorsanız (yani, herkese HiDPI görüntülerini besliyorsanız), tarayıcınızla% 200 yakınlaştırabilirsiniz. Chrome öykünmesi, medya sorgularında etkili olmasının yanı sıra yararlı bir araçtır, ancak yakınlaştırmayı engellediği için görüntü kalitesini inceleyemezsiniz.

Firefox ve Edge'de Yakınlaştırma

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

Google Chrome "33.0.1720.0 Canary" sürümünde, artık iPhone5 ve diğerleri gibi cihazları "Cihaz piksel oranı", "android yazı tipi ölçümleri" ve "Görüntü alanı emülasyonu" gibi harika bir parametre setiyle taklit edebilirsiniz .

Artık o Firefox hackine gerek yok - zaten çalışmak çok zor.

Google geliştirici ekibine teşekkürler! ! :)

Chrome'da bunu şu şekilde yapabilirsiniz:

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

2) Ardından "Konsol çekmecesinde 'Öykünme' görünümünü göster" i seçin.

3) Son olarak, Geliştirici Araçlarında "konsol çekmecesini" açın ve Emülasyon'u seçin . Set Öykün ekranı ve set Cihaz Piksel Oranı 2,5.

Anladığım kadarıyla retina cihazı almaktan başka mümkün değil.

Bazı Geçici Çözümler

• Burada önerildi:

  • Görüntü boyutlarını iki katına çıkardıysanız ve oranlar hala aynıysa, oldukça güvendesiniz. Test edilecek bir retina ekranınız yoksa, piksel oranı medya sorgusundan genişliğe dayalı bir sorguya geçin.

  • Yüksek Çözünürlüklü İçeriğin Test Edilmesi ve Sorun Giderme
    http://developer.apple.com/library/mac/#documentation/GraphicsAnimation/Conceptual/HighResolutionOSX/Testing/Testing.html

• Retina MacBook Pro olmadan HiDPI ("Retina") için Nasıl Geliştirme Yapılır
  http://make.wordpress.org/ui/2012/08/01/dev-for-hidpi-without-retina-mbp/

• WordPress Retina Resimleri
  http://wpmu.org/wordpress-retina/

Daha Az Alakalı

• Duyarlı, Retina'ya Hazır Bir Web Sitesi Nasıl Oluşturulur

• Apple'ın Retina Ekranları İçin Nasıl Tasarım Yapılır
  http://www.studiopress.com/design/retina-display-design.htm

• Retina Ekranlar için Web Siteleri Oluşturma: Piksellerle Arkadaş Edinme
  http://www.slideshare.net/shoshizilla/building-websites-for-retina-displays-making-friends-with-pixels

• Retina ekran için bir web sitesi nasıl geliştirilir?

• retinaya nasıl hazır olunur?

Google Chrome ile Retina (HiDPI) Ekranı Taklit Etmek İçin Mevcut Yöntem

1) Web sayfasında " Sağ Tıklayın " ve ardından Chrome'un Geliştirici Araçlarını Açmak için " İncele " yi seçin

2) " Cihaz Modunu Değiştir " Simgesini tıklayın

3) Ekranın üst kısmındaki Cihaz Açılır kutusunda, " HiDPI Ekranlı Dizüstü Bilgisayar " ı seçin

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

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 yararlı buldum.

Bunun çalışma şekli değişeceğinden örnek kod dahil değildir.

Google Chrome Sürümü 80

1. Geliştirici Araçlarını açın ctrl-shift j
2. Sol üstteki tablet / telefon simgesine tıklayarak cihaz araç çubuğunu değiştirin (tıklarsanız maviye dönecektir)

3. Şimdi görünüm penceresinin üzerinde bir araç çubuğu olmalıdır. Sağ üstteki seçenekler simgesini (3 nokta) tıklayın ve Cihaz piksel oranı ekle seçeneğini seçin.

4. Şimdi seçeneği araç çubuğunda görmelisiniz. Buradan 1x, 2x veya 3x'e geçebilirsiniz.

5. Test yaparken piksel oranını her değiştirdiğinizde yenile düğmesine bastığınızdan emin olun. Oranı 2x olarak ayarlarsanız ve ardından tekrar daha düşük bir değere ayarlarsanız, herhangi bir değişiklik görmezsiniz çünkü tarayıcı zaten 2x veya daha yüksek bir değeri getirmişse, 1x varlık getirmez.

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 çalışıyor. Bulanık göründüğü için svg ölçeklemesinden emin değilim, ancak bu svg görüntüsü.

Mac'iniz (veya mac osx sanal makineniz) varsa ios emülatörünü xcode ile kullanabilirsiniz. pencereyi iki kat daha büyük patlatır, bu nedenle gerçek hayatta göründüğü gibi değildir, ancak görüntülerinizin bulanık olup olmadığını açıkça gösterir.