Duyarlı Web Sayfası Tasarımı - Görünüm

Görüntü alanı nedir？

Görüntü alanı (viewport), kullanıcıların web sayfasındaki görülebilen alanıdır.

Görüntü alanı cihazlara göre değişir, mobil telefonlarda bilgisayar ekranından daha küçük olabilir.

Tablet ve telefon öncesi, web sayfaları yalnızca bilgisayar ekranları için tasarlanmıştır ve statik tasarım ve sabit boyutlu web sayfaları oldukça yaygındı.

Tablet ve telefon kullanmaya başladığımızda, sabit boyutlu web sayfaları ekranı sığdıramaz. Bu sorunu çözmek için, bu cihazlardaki tarayıcılar tüm web sayfasını ekran boyutuna oranla küçültür.

Bu tam olarak mükemmel değil! Acil bir düzeltme olarak geçer.

görüntü alanını

HTML5, web tasarımcılarının <meta> etiketini içermelisiniz, görüntü alanını kontrol etmek için.

Tüm web sayfalarında aşağıdaki <meta> Görüntü alanı öğesi：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Tarayıcıya sayfa boyutunu ve ölçek oranını nasıl kontrol edeceğine dair talimatlar sağlar.

width=device-width Bazı ayarlar sayfanın genişliğini cihaz ekranının genişliğine ayarlar (cihazına bağlı olarak).

Tarayıcı web sayfasını ilk kez yüklediğinde,initial-scale=1.0 Bazı ayarlar başlangıç ölçek seviyesini belirler.

Aşağıda, görüntü alanı meta etiketi olmayan web sayfası ve görüntü alanı meta etiketi olan web sayfasının örnekleri verilmiştir：

İpucu：Bu sayfayı telefon veya tablet ile görüntülediğinizde, aşağıdaki iki bağlantıyı tıklayarak farklılıkları görebilirsiniz.



Görüntü alanı meta etiketi olmadan


Görüntü alanı meta etiketi ile

İçeriği görüntü alanının boyutuna ayarlayın

Kullanıcılar, masaüstü ve mobil cihazlarda web sitelerini dikey olarak kaydırmayı tercih ederler, değil yatay olarak!

Bu yüzden, kullanıcıyı web sayfasının tamamını görmek için düzeltme veya küçültme zorlamak kötü bir kullanıcı deneyimi yaratır.

Bazı ek kuralların uygulanması gerekmektedir：

1. Büyük sabit genişlikli öğeler kullanmayın - Örneğin, görselin genişliği görüntü penceresinin genişliğinden büyükse, görüntü penceresi yatay kayabilir. Bu içeriği, görüntü penceresi genişliğine uygun şekilde ayarlamaktan emin olun.

2. İçeriklerin belirli bir görüntü penceresi genişliğine bağlı olarak iyi bir görüntü sunmasını beklemeyin - Ekran boyutları ve genişlikleri cihazlar arasında büyük ölçüde değişiklik gösterdiğinden, içeriklerin belirli bir görüntü penceresi genişliğine bağlı olarak iyi bir görüntü sunmasını beklememelisiniz.

3. Küçük ve büyük ekranlar için farklı stiller uygulamak için CSS medya sorguları kullanın - Sayfa öğelerine büyük CSS mutlak genişlik ayarlamak, bu öğelerin küçük cihazlardaki görüntü pencerelerine çok geniş olmasına neden olabilir. Aksine, örneğin width: 100% gibi göreceli genişlik değerlerini kullanmayı düşünmelisiniz. Ayrıca, büyük mutlak konum değerlerini dikkatli kullanmalısınız, bu da öğelerin küçük cihazların görüntü pencereleri dışına kaymasına neden olabilir.