Duyarlı Web Tasarımı - Görünüm Alanı
Görünüm Alanı nedir?
Görünüm alanı, kullanıcının bir web sayfasının görünür alanıdır.
Görüntü alanı cihaza göre değişir ve cep telefonunda bilgisayar ekranından daha küçük olacaktır.
Tabletler ve cep telefonlarından önce web sayfaları sadece bilgisayar ekranları için tasarlanıyordu ve web sayfalarının statik bir tasarıma ve sabit bir boyuta sahip olması yaygındı.
Daha sonra, tabletler ve cep telefonları kullanarak internette gezinmeye başladığımızda, sabit boyutlu web sayfaları görüntü alanına sığmayacak kadar büyüktü. Bunu düzeltmek için, bu cihazlardaki tarayıcılar tüm web sayfasını ekrana sığacak şekilde küçülttü.
Bu mükemmel değildi! Ama hızlı bir düzeltme.
Görünüm Alanını Ayarlama
<meta>HTML5, web tasarımcılarının etiket aracılığıyla görünüm üzerinde kontrolü ele geçirmesine izin veren bir yöntem sundu
.
<meta>Tüm web sayfalarınıza aşağıdaki görüntü alanı öğesini eklemelisiniz :
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Bu, tarayıcıya sayfanın boyutlarını ve ölçeklendirmesini nasıl kontrol edeceğine dair talimatlar verir.
Parça width=device-width, cihazın ekran genişliğini takip etmek için sayfanın genişliğini ayarlar (cihaza göre değişir).
Parça initial-scale=1.0, sayfa tarayıcı tarafından ilk yüklendiğinde ilk yakınlaştırma seviyesini ayarlar.
Görünüm alanı meta etiketi olmayan bir web sayfası ve görünüm alanı meta etiketine sahip aynı web sayfası örneği :
İpucu: Bu sayfayı bir telefon veya tablet ile geziyorsanız, farkı görmek için yukarıdaki iki bağlantıya tıklayabilirsiniz.
İçeriği Görünüm Alanına Göre Boyutlandır
Kullanıcılar, web sitelerini hem masaüstü hem de mobil cihazlarda dikey olarak kaydırmak için kullanılır - ancak yatay olarak değil!
Bu nedenle, kullanıcı tüm web sayfasını görmek için yatay olarak kaydırmaya veya uzaklaştırmaya zorlanırsa, bu kötü bir kullanıcı deneyimiyle sonuçlanır.
İzlenecek bazı ek kurallar:
1. Büyük sabit genişlikli öğeler KULLANMAYIN - Örneğin, bir görüntü, görünüm alanından daha geniş bir genişlikte görüntülenirse, görünüm alanının yatay olarak kaydırılmasına neden olabilir. Bu içeriği, görünümün genişliğine uyacak şekilde ayarlamayı unutmayın.
2. İçeriğin iyi görüntülenmesi için belirli bir görüntü alanı genişliğine güvenmesine İZİN VERMEYİN - CSS piksellerindeki ekran boyutları ve genişliği cihazlar arasında büyük farklılıklar gösterdiğinden, içeriğin iyi görüntülenmesi için belirli bir görüntü alanı genişliğine dayanmamalıdır.
3. Küçük ve büyük ekranlar için farklı stiller uygulamak için CSS medya sorgularını kullanın - Sayfa öğeleri için büyük mutlak CSS genişlikleri ayarlamak, öğenin daha küçük bir cihazdaki görünüm için çok geniş olmasına neden olur. Bunun yerine, genişlik: %100 gibi göreli genişlik değerleri kullanmayı düşünün. Ayrıca, büyük mutlak konumlandırma değerleri kullanmaya dikkat edin. Küçük cihazlarda öğenin görünüm alanının dışına düşmesine neden olabilir.