Mobil cihazlar için çözünürlük aslında büyük, sadece ekran boyutu küçük. buna dayanarak:
Yanıtlar:
Duyarlı tasarım ne ekran çözünürlüğüne ne de ekran boyutuna dayanmaktadır. Bunun yerine, duyarlı tasarım içeriğe ve nasıl yapıldığına dayanarak tüm boyutlara ve çözünürlüklere uymasını sağlar.
Duyarlı tasarımı düşünme şekliniz yanlış. Sanırım daha geleneksel bir baskı tasarımı geçmişinden geliyorsunuz, değil mi? Web için tasarım çok daha serbesttir. Duyarlı web siteleri, genellikle web'den daha fazlasına izin verdiği için konvansiyonel kesme noktalarına veya belirli boyutlara / çözünürlüklere sahip değildir - tüm ekran boyutlarına ulaşılmasına izin verir. Bu şekilde, makul olduğu sürece tasarladığınız şey için doğru olan boyutları kullanarak tasarlayabilirsiniz.
Bununla birlikte, en iyi uygulama, mobil olarak en önemlisi olarak adlandırılması gereken, önce mobil olarak tasarım yapmaktır . Bu, sizi en önemli ve mümkün olan içeriğe odaklanmaya zorlar ve daha sonra büyük ekranlarda daha fazlasıyla başlamaya zorlamak yerine daha büyük ekranlar için daha fazlasını eklemenizi sağlar ve daha küçük ekranlar için tasarım yaparken işleri kaldırır. Duyarlı tasarım astarımda bu konuda daha fazla bilgi edinebilirsiniz .
Ama aynı zamanda yanıt verebilecek şekilde tasarım yapmalıyız. En iyi uygulaması, ister prototip biçiminde ister tel çerçeve programında olsun, PSD gibi statik bir belge değil canlı bir örnektir. Geliştirici tarafı söz konusu olduğunda, duyarlı birimleri kullanmalı ve kodumuzu mantıklı bir şekilde yapılandırmalıyız.
Bununla birlikte, şeyleri ekran boyutu yerine piksel cinsinden, yani çözünürlük açısından koymalısınız.
Gerçekten harika bir soru!
Buradaki bazı düşünceler bugün karşı karşıya olduğumuz çelişkileri biraz yorumluyor.
Teknoloji , çağlardan beri olması gereken şey değil .
Hepimiz , kullanıcının bazı ek ayarlamalar yapmasına izin vermek için bir miktar esneklik ve özgürlükle gerçek yaşam birimlerine (veya algılanan boyuta) dayanarak tasarım yapmalıyız.
Ancak gerçek yaşam ölçümlerini bilmek için her iki bilgiye de ihtiyacımız var. Fiziksel boyutlar ve Cihaz çözünürlüğü = piksel yoğunluğu.
Ancak, sadece birkaç yıl önce ekran cihazlarının piksel yoğunluğunu beyan etmeye başladığı anlaşılıyor. Ve bazıları sunucuya bildirmez, sadece çok fazla tanıtım yapın. (Aka Ipad, Iphone)
Ekran çözünürlüğü işletim sistemi tarafından tespit edilebilir, çünkü buna göre bir sinyal göndermek zorunludur, ancak ekran gerçek yaşam boyutu için her modelin büyük bir veritabanına ihtiyacımız var. İyi değil.
Bizi bildiğimiz bazı bilgiler olduğu için bu ekran çözünürlüğü bize bırakıyor.
Ancak büyük bir FullHD monitör için bir mobil cihazda aynı çözünürlükten tasarlamak tamamen farklıdır. Her ikisi de 1920x1080. Ahh.
Özel bir durum, projektörlerde, projeksiyon mesafesi ve izleyici mesafesi hakkında hiçbir fikrimiz olmadığıdır.
Kısmi bir çözüm, medya sorguları ve vektör öğeleri vb.
Web tasarımı için: En azından daha iyi bir şey bulana kadar.
Akışkan tasarımı (yüzdeler) ve doğal akış, iyi tanımlanmış bölümler.
1920 geniş
medya sorgusu muhtemelen 1280'de
ve / veya 1024'te
muhtemelen 720'de
ve 480.
ek destek için cihaz algılamalı.
Mobil yerel uygulamalar için
Çok spesifik olduğu için, UI ve Simgeler ile ilgili olarak markanın gidişatlarını takip edin.
Düzenlenen.
Neden bir FullHD mobil cihazda küçük bir ekran çözünürlüğü seçmelisiniz?
Bir akıllı telefonun gerçek bir FullHD çözünürlüğü vardır, ancak normalde sunucuya ve tarayıcıya küçük bir çözünürlük bildirir. Medya sorgularının çalışması için bu googling https://www.google.com/search?q=what+is+my+screen+resolution'u test edebilirsiniz .
İlk olarak, cevaplar ve değerli yönergeler için hepinize teşekkür ederim, elbette yardımcı oldu!
Sonucumu eklememe izin ver:
Pratik olarak, mobil ekran çözünürlüğünü hedeflemek iyi bir UX değildir, çözünürlük küçük ekran için çok yüksektir, yazı tipleri okumak için çok küçük olacaktır, simgeler tıklamak için çok küçük olacaktır, vb.
Bu nedenle, tasarımı gerçek görüntü alanı boyutuna göre yapmak daha iyidir! Bu şekilde bir kullanıcının görebileceği ve hissedebileceği temel alınır.
Bunu gerçek hayatta elde etmek için <head>HTML belgelerinin içine bir görünüm alanı genişliği meta etiketi eklemeliyiz :
<meta name="viewport" content="width=device-width, initial-scale=1.0">Bu, tarayıcıya sayfayı ekran genişliğine eşit genişlikte oluşturmasını söyler, böylece HTML sayfa genişliğinin piksel cinsinden ekran genişliğine eşit olmasını sağlar. Daha sonra, farklı mobil görüntü alanı boyutlarını (birbirine yakın olan) hedefleyen medya sorguları ile geliştirme kolayca planlanabilir ve daha görsel olarak net öğeler üretecektir.
Yanlışım varsa lütfen düzelt.
Mütevazı deneyimime dayanarak daha iyi yanıt veren web sitesi geliştirme için aşağıdaki adımları öneririm:
1- view-port meta kullanın (yukarıya bakın), web sayfasının google'a göre mobil arama sonuçlarındaki sıralamasını da artıracaktır. http://googlewebmastercentral.blogspot.com/2015/04/faqs-april-21st-mobile-friendly.html
Testten sonra, yalnızca görüntüleme noktası meta eklemenin, web sitenize notlarınızı mobil test araçlarında vereceği anlaşılıyor https://developers.google.com/speed/pagespeed/insights/
2- önce mobil yaklaşımı uygulamayı düşünebilirsiniz, daha küçükten daha büyük gitmek her zaman daha kolaydır (web sitenizin ne kadar karmaşık olduğuna bağlıdır)
3- Bunu gerçekleştirmek için bir hibrit duyarlı sistem, adaptif (akışkan) ve duyarlı (css ortam sorguları) arasında bir karışım uygulayın:
Genişlik ve yatay kenar boşlukları / dolgular için yüzde kullanın . (isterseniz dikey kenar boşlukları sabit piksel boyutuna sahip olabilir .. kaydırma artık sorun değil)
Fontlar için em kullanın , bu şekilde medya sorgusunda gövde (veya html) için yazı tipi boyutunu değiştirdiğinizde tüm CSS öğeleri bu boyuta uyarlanır, px kullanmak onu kabus yapar, çünkü her CSS sınıfı için gitmeniz gerekir ve yazı tipi boyutunu değiştirin.
Div öğelerini sola kaydırın , böylece kullanılabilir alana doğru hizalayın (veya tasarımınız gerektiriyorsa sağa).
4- Kırılma noktalarını tanımlayın, bunun için duyarlı bir test aracı kullanın. Firefox'a duyarlı tasarım görünümü kullanıyorum, web sitesinin hatalı hale geldiği noktaya (örneğin 500 piksel) ulaşıncaya kadar genişliği daraltıyorum, bu bir kırılma noktası işaretleyin.
Yeni kesme noktası (500 piksel) için medya sorgusuna yeni CSS kurallarını uygulayın ,
5- Web sitesi kalitesini ve netliğini korumayı unutmayın! elemanlar netleşmez ve birbirine çok yakın olursa, konteyner genişliğini kaplamak ve dikey olarak istiflemelerini sağlamak için eleman genişliğini genişletin,
ve tüm alt öğelerin daha büyük bir yazı tipini devralması ve daha okunabilir hale gelmesi için gövde için yeni bir yazı tipi boyutu vermeyi unutmayın.
6- Duyarlı testi tekrarlayın ve ikinci kırılma noktanızı tanımlayın.
Daha önce ağır tasarım öğeleri ile büyük bir web sitesinde çalıştım ve sadece 2 medya sorgusu gerekli :)
Umarım yardımcı olur
Duyarlı bir sayfanın nasıl yeniden aktığı, sanal piksellerdeki (gerçek pikseller değil ) görünüm alanının (ekran değil) boyutlarına dayanır .
1 sanal piksel = 1 gerçek pikselin olduğu geleneksel bir masaüstünde, tarayıcınız 1000 piksel genişliğe ayarlanmışsa, sayfa buna uyacak şekilde yeniden akacaktır.
1 sanal pikselin (Apple bu noktaları çağırdığı ) = 3 gerçek piksel olduğu, tarayıcı genişliği ekran genişliğidir ve içerik 417 piksel genişliğe sığacak şekilde yeniden akar (bu aslında 1242 gerçek piksel olsa da)
Bu yüzden biraz garip, yukarıdaki örneklerle, daha az gerçek piksele sahip cihaz aslında duyarlı bir düzende daha geniş bir görünüm olarak görülüyor .