Bir web sitesinin piksel cinsinden standart genişliği nedir veya istatistikler nerededir?
Yanıtlar:
Çoğu geliştirici standart olarak 1024x768 olduğunu varsaymasa da, standart yoktur.
Gövde genişliğini 960 piksel olarak kabul eden 960grid adında bir CSS ızgara sistemi vardır, daha sonra 96 sütunlarda 10 piksel, 80 sütunlarda ise 12 piksel x sütunlar.
Sorun şu: PC ekranları her zaman daha da büyüyor, bazı bölgelerde yavaşça ama büyüyor.
Öte yandan, teknisyenler, mobil cihazlarda ve netbooklarda daha küçük ekranlara sahip.
Bu gerçekliğin üstesinden gelmek acı verici olabilir. Kurtarma için CSS Media Queries var. Alternatif olarak, mobil cihazlara alternatif bir sürüm sağlamak için etiket bağlantısını (rel handheld ile) kullanabilirsiniz.
Sizin için bazı referans linklerini takip edin
Bir web sitesinin piksel cinsinden standart genişliği nedir?
0'dan büyük ve sonsuzdan küçük herhangi bir sayı.
Responsive Web Tasarımı (RWD) için mevcut en iyi uygulamalar piksel cinsinden genişliği ne olursa olsun her cihazı desteklemektir. Genellikle bu, farklı ekran boyutları aralıkları için farklı stiller sağlamak için ortam sorguları kullanılmasını içerir. Kullanılan asıl aralıklar, tasarımın boyutlar arasında tutarlı olmasından ve sitenin boyutlar arasında işlevselliğini sürdürmesinden daha az önem taşır.
Kullanıcıların çok fazla düşünmeden farklı ekran boyutlarını görmeleri çok muhtemeldir, bu nedenle bir pencereyi ekranlarının yarısına sabitlemek için sürüklediklerinde veya telefonlarını yatırdıklarında sürpriz miktarını en aza indirmek istersiniz.
Kullanılan bazı yaygın genişlik aralıkları şunlardır:
Bu aralıklar o kadar yaygın ki pratikte bir standart olduklarını söyleyebilirim. Tüm aralıkların kullanılması gerekmez, örneğin bir bölge 768'in altındaki herhangi bir şey için sıvı genişliği ve daha sonra sabit genişlik ve 768+ için ortalanır.
Tüm bunlara rağmen, sitenin bir kullanıcı tarafından görüntülenmeyi seçtiği herhangi bir cihazda işlevsel olduğu sürece, kullandığınız sayıların özellikle önemli olmadığını unutmayın.
istatistikler nerede
Şimdi zor kısmı, gerçek veri. Bir siteyi yeniden tasarlıyorsanız, önemli olan tek şey size aittir. Vikipedi ya da Yığın Taşması ya da Google veya başka herhangi bir büyük web sitesi olan-liste-analitik-verinin söylediği şey , siteniz için verilerinizle alakasızdır .
İstatistikleriniz çoğu kullanıcıya öncelikle belirli bir aygıt genişliği aralığı kullanıyorsa, muhtemelen önce bu kullanıcılara hizmet vermeye odaklanmalısınız. Bunların hepsi, “Tasarımınız uygun şekilde cevap veriyorsa, belirli bir boyuta odaklanmanıza gerek kalmayacak.
Daha önce analitiğe sahip olmayan yeni web siteleri veya siteler için, öncelikle mobil ilk yaklaşımı kullanmayı düşünün ve kullanıcı tabanınıza uygun şekilde adapte olabilmeniz için analitik kullandığınızdan emin olun.
Hiç kimsenin google tarafından tarayıcı boyutundan bahsetmediğine şaşırdım .
Standartlara gelince:
İzleyicilerin% 80 1000 piksel genişliğe kadar işleyebilir ancak olanlar olabilir fazla 1000 piksel genişliğe kolu genellikle yok. Geniş ekranlı monitörler sayesinde, birçok kişi pencerelerini ekranın yarısına hizalar. Şimdi Win7 drag-n-dock'u destekliyor, muhtemelen daha da popüler olacak.
Yükseklik gelince: Kullanıcıya ilk izlenim sayfanın üstündeki yaklaşık ~ 600px. Bununla birlikte, çoğu kullanıcı içeriğin "kıvrımın" altına düşmesini bekler ve bekler ve kaydırma yapmaya isteklidirler.
1000 pikselden daha geniş gitmek istiyorsanız, netbook'lardaki ve daha küçük ekranlardaki kullanıcıların içeriği düzgün bir şekilde görebilmeleri için sıvı düzenini şiddetle tavsiye ederim.
~ 960 piksel standart bir genişlik olma eğilimindedir, ancak gerçekten içeriğe ve stile bağlıdır.
Ortalama iç tarayıcı genişliklerinin ve yüksekliğinin ne olduğunu (kullanıcıların gerçekte ne gördüklerini) bulmak için Google Analytics'i kullanarak geçen yıl küçük bir test yaptım .
Diğerlerinin dediği gibi, bu tür bir şey için standart yoktur. Her ne kadar, işte web sitenizi ya yapacak ya da frenleyecek birkaç ipucu:
Her zaman yüzdeleri ya da en kötü senaryo senaryosunu kullandım: genel olarak karşılaşacağınız en küçük ekran çözünürlüğü 800x600 ve hatta bu nadir. Altındaki herhangi bir şey muhtemelen bir mobil cihazda. 775px genişlik, kullanmak için iyi bir ortamdır veya web sitenizin daha büyük bir ekrana ölçeklendiğinde yine de temyizde bulunacağını biliyorsanız% 80'dir. En yaygın sorun, metin içeriğinin (1600 piksel genişliğe kadar ölçeklendiğinde) boş ve kısa görünmesidir. Web sitenizin 775 piksel genişliğe sahip olması bu sorunu çözecektir, ancak her iki taraftaki büyük açık alanlarla iyi görünmeyebilir.
Kullanıcılarınızı ASLA sola veya sağa kaydırmayın. Tarafların içeriğini kesmek, potansiyel müşterileri veya okuyucuları kaybetmenin en hızlı yoludur.
Navigasyonunuzu üste yakın bir yerde veya kullanıcıların bulmak için kaydırma yapmak zorunda kalmayacakları bir yere koyun.
Ve sadece bir içerik ipucu; Ya yüksek grafik / düşük bilgi ya da yüksek bilgi / düşük grafik var. İkisini birleştirmeye çalışmak her zaman korkunç görünüyor.
Standart "mümkün olduğunca genişlik / yükseklik" olacaktır. Bu kullanıcıların ekranına bağlıdır:
Popüler ekran çözünürlüklerinin ne olduğunu bilmek ve ardından şablonunuzu çoğunluk tarafından genel kullanıma dayalı olarak kullanmak yararlıdır ... Şahsen Duyarlı Tasarım kullanmanızı öneririm - bu şekilde siteniz tüm cihazlar ve tüm çözünürlüklerde çalışır.
Ocak 2013 itibariyle.
1366x768 % 25,4
1920x1080 % 11,0
1280x1024 % 9,7
1440x900 % 7,3
1280x800 % 8,2
1680x1050 % 5,7
1600x900 % 5,0
1920x1200 % 2,9
1360x768 % 2,1
2560x1440 % 1,1
Diğer % 11.6
Google Analytics, ziyaretçinin ekran çözünürlüklerini kaydeder. Kolayca ortak ekran boyutları nelerdir denetlemek için özel bir rapor oluşturabilir senin ziyaretçiler. Mayıs 2013’teki web sitem için istatistikler (en iyi 15):
Rank Resolution % of Visits
---- ---------- -----------
1 1366x768 23.0%
2 1920x1080 17.7%
3 1440x900 8.4%
4 1280x1024 8.4%
5 1680x1050 7.1%
6 1280x800 6.9%
7 1600x900 6.0%
8 1920x1200 4.7%
9 1024x768 4.4%
10 2560x1440 2.3%
11 1360x768 2.1%
12 1280x768 1.0%
13 1600x1200 0.7%
14 1280x720 0.7%
15 1152x864 0.5%
İstatistikler, siteden siteye, aldığı trafik türüne bağlı olarak değişir; buna göre tasarlanır. Ben kendim de yüzde genişlik, 1000 piksel min-widthve makul oranda sıvı tasarımlarını tercih ediyorum max-width.
Gerçekten standart bir şey yoktur ve istatistikler tamamen hedef demografiye dayanmaktadır. Teknik insanlara odaklanmak genellikle daha iyi donanım ve daha yüksek çözünürlükle sonuçlanacak, bunun tersi daha az teknik olacaktır. Ancak, çoğu durumda normdan çok daha düşük çözünürlüğe sahip telefonlar, netbooklar vb. Vardır.
Başvuru için genellikle şimdi en az 1024x768 olduğunu varsayıyorum.
Her durumda, burada bazıları: http://www.w3schools.com/browsers/browsers_display.asp http://www.w3counter.com/globalstats.php
Bence bu web sitesinin içeriğine bağlı.
Örneğin, herhangi bir kenar çubuğuna, vb. İhtiyacınız yoksa ve en az tasarımdan hoşlanıyorsanız, web sayfalarının genişliğini 500 piksel olarak ayarlayabilirsiniz.
Bu nedenle, web düzeninin boyutları hakkında standart inanmıyorum (ve sevmiyorum).
960 piksel, en güvenli olanıdır, çünkü 1024x768 ekranda çalışır ve kaydırma çubuğu için yer bırakır ve aynı zamanda bir iPhone'da yatay modda çalışır (çünkü piksel 480x320 ekranını iki katına çıkarır ve 960x640 boyutundadır. kaydırma çubuğu).
Günümüzdeki geniş ekranlı monitörlerin çoğunun "1440x900" veya daha geniş bir çözünürlüğe sahip olduğu göz önüne alındığında, 1280 piksel genişliğinde bir fotoğrafın, özellikle de görüntülerin gösterilmesi konusunda daha "standart" hale geldiğini düşünüyorum.
NOT: 1280 piksel genişliğinde, daha eski 4: 3 oranındaki 17 inç ve 19 inç ekranların genişliği vardı.