2013-03-19 17 views
5

Haber bölümümün olduğu duyarlı bir web sitesi hazırlıyorum. Ziyaretçilerin ekran boyutuna bağlı olarak, bu bölüm 2, 3 veya 4 haber içeriğine sahiptir. Şimdilik, cms (modx) her zaman 4 haber öğesi sağlıyor ve eğer kullanıcı küçük bir viewport'a sahipse, ekstra haber öğelerini medya sorgularıyla saklıyorum.Ekran boyutuna bağlı olarak gereksiz içeriğin yüklenmesini engelleyin

Bu çok verimli görünmüyor (küçük ekranlı kişiler için ekstra bant genişliği kullanır). Yukarıdaki yaklaşımı kullanarak, "yeni yayınlar", "eski yayınlar" türünde gezinme ("eski yayınlar" ı tıklamak, her zaman 4 eski gönderiyi yükleyeceğinden, bazı kişilerin yalnızca 2 veya 3'e ihtiyaç duyabileceğinden) "yeni yayınlar", "eski yayınlar" ile ilgili sorunla karşılaşıyorum.

Bunu yapmanın daha iyi, güvenilir bir yolu var mı? Haber öğelerinin sunumunu daha duyarlı hale getirmek mümkün mü? Başka bir deyişle: Ekran boyutuna bağlı olarak gereksiz içeriğin indirilmesini nasıl önleyebilirim?

+0

Duyarlı tasarımın ayrı sitelere karşı dezavantajlarından biri de css ile gizlenmiş olsa bile içeriğin indirilebilmesidir - bunun bir yolu, ekran boyutuna göre js ile bazı öğeleri dom içine enjekte etmektir. Siteniz js devre dışı bırakılmışsa sitenizi bozabilir – Pete

+0

Sunucu tarafı bileşenlerini kullanarak bakabilirsiniz: http://www.lukew.com/ff/entry.asp?1392 –

+0

Sunucu tarafı veya temassız çözmeniz gerekir. yükleniyor, lütfen tasarımcılarınızı da bu sayfaya yönlendirin: https://managewp.com/5-reasons-why-responsive-design- değil-o-not-it – span

cevap

3

bir yolu ne yaptığınızı ters yoldan olacaktır: oluşturmak Sayfayı yalnızca 1 haber öğesi ile ve daha sonra doldurmak gerekirse daha

(yerine saklayarak daha sonra 4 ile üreten ve) Kullanıcının görüntü alanının JS ile daha fazla öyküye izin verip vermediğini ve daha sonra ajax kullanarak getirip getiremeyeceğini (bu arada belki de bir 'daha fazla yükleme' animasyonuyla birlikte) belirleyebilirsiniz.

Bu sayede mobil kullanıcılar bant genişliklerini kullanmazlar ve JS olmayan kullanıcılar için de 1 haber öyküsüne dönüşür (ek olarak "daha fazla tıklama" özelliğiyle büyük görüntü alanları olan JS olmayan kullanıcılar da sağlayabilir link)

+0

Bu mantıklı. Medya sorgularımda, jquery'nin em'de de viewport boyutunu tespit edip edemeyeceğini biliyor musunuz? Çünkü o zaman bu mükemmel bir çözüm olurdu. –

+0

Etrafa baktığımda bunun zor olacağını görüyorum, bu yüzden bu sadece medya sorgularımı px'de yapıyorsam çalışacaktır. @Ella Ryan'ın belirttiği gibi –

+0

, ilerici geliştirmenin, duyarlı sitenizi kullanıcı dostu tutmanız için harika ve tek bir çözüm olacaktır. Ajax ile daha fazla haber almak oldukça basittir ve avuçiçi cihazlar kullananlar için fark yaratacaktır. –

İlgili konular