Daha yüksek çözünürlüklü bir ekran nasıl simüle edilir? [kapalı]

95

Tarayıcının web sitelerimi ekranlarımdan daha yüksek çözünürlüklerde test etmesinin bir yolu var mı?

Örneğin: 1440 x 900 ekranım var ve web sitesini 1920 x 1200, 1920 x 1080 vb. İle test etmek istiyorum.

html css resolution

— HappyDeveloper
kaynak

@deceze aslında çok iyi bir öneri. 960.gs gibi şeylerin ortaya çıkması, piksel boyutlarıyla çalışıyorsanız, tasarımınızın her yerde aynı görünmesi, ekranın çözünürlüğüne bağlı olarak sadece farklı miktarlarda ekran alanı kaplamasıdır. Herhangi bir ek yerinin aynı hizada olmasını sağlamak için tam 2 ve biraz bit tekrarlarını görebildiğiniz sürece, yatay olarak tekrar eden grafikleri yüksek çözünürlükte test etmeye gerek yoktur. Veya daha ilginç bir şey üretmek için ağustosböceği ilkesini kullanabilirsiniz.

— Endophage

1

@Endophage: Katılmıyorum. Düzgün akışkan düzenler oluşturmak, örneğin kullanıcı yazı tipi boyutu tercihleri açısından genellikle daha iyi sonuçlar verir. Her yerde aynı görünmek gerekli değildir, sadece piksel gözetlemektir.

— Sen

@You, Henüz yazı tipi boyutunu değiştiren akıcı bir düzen görmedim. Sabit piksel genişliklerinin iyi olmasının nedeni, insan gözünün belirli bir uzunluktaki satırları taramakta zorlanmasıdır (12 piksel yazı tipi boyutunda yaklaşık 20 kelime olduğuna inanıyorum, kendiniz bakabilirsiniz). Telefon çözünürlüklerine geçmekten bahsediyorsanız, bu farklı bir hikaye, ancak masaüstü / dizüstü bilgisayar çözünürlüklerinden bahsediyorsanız, sadece yüksek çözünürlüklü büyük bir ekranım varsa ve pencereyi yeniden boyutlandırırsam, farklı çözünürlükler.

— Endophage

1

@Endophage: Bu nedenle, genişliğiniz olarak 40emdeğil 960px, kullanmanız (veya benzer bir ölçüm) yapmanız gerekir . Ben senin 12px yazı boyutu beni ve basın için çok küçük karar verirken Piksel ölçek olmaz Cmd- +. Ayrıca, tarayıcı pencerem olduğu gibi neredeyse 960 piksel boyutunda.

— Sen

@ Aslında, Ctrl/Cmd +bir yakınlaştırma işlevi olduğu için vurduğunuzda pikseller ölçeklenir . SO'da burada deneyebilirsiniz. Ana içerik bölümü 960 piksel genişliğindedir. 40em gibi bir şey kullanmak ekran çözünürlüğüyle ölçeklenmez. emBoyutları kullanmak , geçersiz kılınmadığı sürece üst düzeyde 1em / 16px'e kadar miras alınan ana öğenin yazı tipi boyutuna bağlıdır (ve özür dilerim, önceki yorumumda 12pt değil piksel olmalıydı). Okuyun: kyleschaeffer.com/best-practices/…

— Endophage

76

[Düzenleme: Önce tarayıcınızın geliştirici araçlarını kontrol edin! @SkylarIttner'ın yorumlarda belirttiği gibi, duyarlı tasarım testi araçları, aşağıdaki çözümün yayınlanmasından bu yana çoğu tarayıcıda kullanıma sunuldu. Şu anda muhtemelen en iyi / en kolay seçenektir.]

Eğer yanılıyorsam beni düzeltebilirsin, basitçe style="desired width & height"ve src="your/test.site"tek çocuğu olarak bir iframe yaratabilirsin <body>. Siteyi çözünürlük belirtilen genişlik / yükseklikteymiş gibi görüntülemeli ve incelemek için kaydırma çubuklarıyla sonuçlanmalıdır.

Üçüncü bir şahıs kullanmak kadar kullanışlı değil, kendiniz ayarlamanız gerekiyor, ancak internet bağlantısı olmadan yerel olarak test etme avantajına sahip.

— Cody Crumrine
kaynak

5

Neden ... söylemeliyim ki bu dahice. +1

— Mafya

Elbette! Teşekkür ederim! ^ ^

— Oskar Duveborn

Yeterince teşekkür edemem!

— Rahman Şerif

1

Tüm olumlu geri bildirimler için teşekkürler arkadaşlar. İşlerin ne zaman yardımcı olduğunu bilmek güzel.

— Cody Crumrine

1

Herkese yardımcı olma ihtimaline karşı, İşte @Cody Crumrine'in önerdiği ve Dahi olduğunu yapmak için örnek kod! <iframe src = " site to test.com" width = "1024" height = "768"> </iframe>

— Stuart

28

Bu çözüm, yukarıda önerilenlerden çok daha hızlıdır:

http://www.infobyip.com/testwebsiteresolution.php

Browserershots.org kadar çok yönlü değil ama çok daha hızlı (birkaç saniye ile 45 dakikalık bir kuyruk).

— Kyle
kaynak

Bu kötü bir cevap değil. Ancak, bu site, herhangi bir masaüstü bilgisayardaki tarayıcı penceresini yeniden boyutlandırarak zaten kendi başınıza yapamayacağınız hiçbir şey sağlamaz. IMHO, tabletler ve telefonlar için bu sayfadaki bağlantılar tamamen değersizdir ... çünkü küçük bir iPod ekranında, 1000 piksel genişliğindeki sitem, mükemmel bir şekilde görüntülenmesi için Mobile Safari tarafından otomatik olarak yeniden boyutlandırılır .

— Sparky

4

@ Sparky672, kişisel olarak tarayıcımı ekran çözünürlüğümden daha büyük olacak şekilde yeniden boyutlandıramıyorum. OP 1920'yi 1440'ta görmek istiyordu. Belki bir yolu vardır, ama infobyip'in çözümü kadar kolay mı? Açık olan bir şeyi gözden kaçırırsam özür dilerim (kendimi olabileceğimi hissediyorum).

— Kyle

2

Teşekkürler @ Sparky672 ve sorun değil. Ancak "bu site, herhangi bir masaüstü bilgisayardaki tarayıcı penceresini yeniden boyutlandırarak kendi başınıza yapamayacağınız kesinlikle hiçbir şey sağlamaz" yorumunuzu silmeniz gerekmez, çünkü bu doğru değildir?

— Kyle

1

@ Sparky672, dikey ne olacak?

— Kyle

1

Ekranın altına ve üstüne düşenleri görmek için dikey kullanıyorum. İzleyicilerin yüzde kaçının neyi gördüğünü görmek için bunu StatsCounter ve MouseFlow ile birleştiriyorum. Seni seviyorum Sparky! Sanırım tonumu yanlış okuyorsun. Ve yardımcı olmak istedim. 0 oy ve yorum listesi ile sunduğum çözüme kimse bakmayacak. Ama pekala ...

— Kyle

9

Bazı fikirler:

Tarayıcı yakınlaştırmasını kullanın, 1024x768% 50 yakınlaştırma = 2048x1536 simüle çözünürlük, Chrome'un görüntüleri ve benzerlerini yeniden boyutlandırdığını biliyorum. Okumak zorlaşıyor ama yerleşimi ve benzerlerini test ettiğinizi varsayıyorum.

Ayrıca, normalden daha yüksek çözünürlüklü ekran görüntülerini almak için bazı ekran görüntüsü programlarını da kullanabilirsiniz (Firefox'ta fireshot bunu yapmama izin verdi, ancak gerçekten yüksek çözünürlüklerde bellek sorunları vardı ve artık ücretsiz değil).

— StrangeWill
kaynak

6

Belki de abartılı bir çözüm, Xvfb'yi kullanmak olabilir : İstenilen çözünürlüğü ve renk derinliğini ayarlayın, sayfanızı tarayıcılara yükleyin ve ekran görüntüsü alın.

— Eugen Constantin Dinca
kaynak

4

Viewlike.us veya screen-resolution.com'u deneyin . Tüm olası çözümler değil, en azından en yaygın olanları.

Onları denemedim ama oldukça basit görünüyor.

— Eddie Cheng
kaynak

ekran çözünürlüğü şunu ortaya çıkarır: "Ekran Çözünürlüğünüz çok küçük Seçtiğiniz pop-up, kullandığınız ekran çözünürlüğü için çok büyük. Ekran çözünürlüğünüz 1440 x 900 pikseldir. Açmaya çalıştığınız açılır pencere 1920'dir piksele 1200. "

— HappyDeveloper

bizim gibi bir görünüm şunu atar: "Yasak Bu sunucuya erişim izniniz yok. Ayrıca, isteği işlemek için bir Hata Belgesi kullanmaya çalışırken 404 Bulunamadı hatasıyla karşılaşıldı. Apache mod_fcgid / 2.3.6 mod_auth_passthrough / 2.1 mod_bwlimited / 1.4 FrontPage / 5.0.2.2635 Server, viewlike.us Bağlantı Noktası 80 "

— HappyDeveloper

2

Bu size testinizin kesin çözünürlüğünü söylemese de, zoomuzaklaştırmak için aracı Chrome veya FF'de kullanabilirsiniz. Bu, sitenin daha yüksek çözünürlüklü ekranlarda nasıl göründüğüne dair oldukça doğru bir fikir verecektir.

— Jason Gennaro
kaynak

2

Sitenizin statik bir ekran görüntüsünü görmek sizin için sorun değilse, http://browsershots.org/

Sitenizin ekran görüntülerini neredeyse her tarayıcı / işletim sistemi kombinasyonunda görme seçeneği sunarlar, ekran boyutunu belirleme yeteneği ve diğer birçok seçenek de dahil olmak üzere.

Yer imlerine koymaya değer.

— Spudley
kaynak

1

Rasgele çözünürlüklerde ekran görüntüsü alabilen wkhtmltoimage'ı denemek isteyebilirsiniz .

Ayrıca KDE4'te bir pencereyi ekran boyutunun ötesine genişletmek mümkündür. Sanırım onu Windows 7'de de gördüm. Diğer işletim sistemlerinden emin değilim.

— user123444555621
kaynak

1

IE9, tarayıcı penceresini rastgele bir boyuta yeniden boyutlandırmanıza olanak tanır: Geliştirici araçları için F12'ye basın, Araçlar | Yeniden boyutlandırın ve tercih ettiğiniz boyutu seçin. Ardından, pencere ekranınızdan daha büyükse ekran dışı pencereleri yakalayabilen bir araç kullanın. Bu makale Snagit'in bunu yapabileceğini gösteriyor gibi görünüyor. Ardından çekilen resme bir bakın.

— Jaco Briers
kaynak