Mobilde Scroll Sorunlarına Karşı 100vh ve 100dvh: Doğru Seçim Hangisi?

Mobilde Scroll Sorunlarına Karşı 100vh ve 100dvh Kullanımı

Mobil cihazlar giderek daha yaygın hale geldiğinden, web tasarımcıları bu cihazlara uygun tasarımlar yapmak için çaba sarf ediyorlar. Ancak, mobil cihazlarda scroll sorunlarına rastlamak oldukça yaygındır. Bu yazıda, viewport yüksekliği ve 100vh / 100dvh birimlerini kullanarak, mobil cihazlarda scroll sorunlarına karşı doğru seçimi yapmanın önemini vurgulayacağız.

Viewport Yüksekliği Nedir?

Viewport yüksekliği, bir web sayfasının görüntüleme alanının yüksekliğini ifade eder. Bu değer, kullanıcının cihazının ekran boyutuna göre değişebilir. Bu nedenle, web tasarımcıları, bir elementin ekranın tamamını kaplaması için genellikle %100 viewport yüksekliği kullanırlar.

100vh / 100dvh Kullanımı

Mobil cihazlarda, viewport yüksekliği tarayıcı araç çubukları ve diğer öğeler nedeniyle farklı olabilir. Bu nedenle, bir elementin ekranın tamamını kaplamak için 100vh yerine 100dvh kullanmanız önerilir.

Aşağıdaki örnekte, 100vh ve 100dvh arasındaki farkı daha iyi anlayabilirsiniz:

<!DOCTYPE html>
<html>
  <head>
    <style>
      /* 100vh kullanımı */
      .container1 {
        height: 100vh;
        background-color: red;
      }

      /* 100dvh kullanımı */
      .container2 {
        height: 100dvh;
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <div class="container1"></div>
    <div class="container2"></div>
  </body>
</html>

Editörde Görüntüle

Yukarıdaki kodda, bir div elementi oluşturduk ve container1 sınıfı için height: 100vh stil özelliğini, container2 sınıfı için ise height: 100dvh stil özelliğini verdik. Bu iki elementi farklı renklerle ayırdık.

100vh kullanarak oluşturulan container1 elementi, mobil cihazlarda tarayıcı araç çubukları nedeniyle ekranın tamamını kaplamaz ve sayfanın scroll edilmesine neden olurken, 100dvh kullanarak oluşturulan container2 elementi ekranın tamamını kaplar ve sayfanın scroll edilmesine neden olmaz.

Tarayıcı Desteği

100vh, modern tarayıcılar tarafından desteklenmektedir ancak mobil cihazlarda tarayıcı araç çubukları nedeniyle sorunlar oluşabilir. 100dvh ise daha yeni bir özelliktir ve bazı tarayıcılarda desteklenmeyebilir.

100vh:

Google Chrome
Mozilla Firefox
Apple Safari
Microsoft Edge

100dvh:

Safari (Sadece iOS 15 ve sonrası)
Android WebView (Sadece Android 12 ve sonrası)

Bu nedenle, hedef kitlenizin kullandığı cihazları ve tarayıcıları dikkate almanız önerilir. Ayrıca, sayfanızın tasarımında daha iyi sonuçlar elde etmek için CSS'in diğer birimlerini de kullanabilirsiniz.

Örneklerle Doğru Kullanım

Bir örnek üzerinden doğru kullanımı açıklamak gerekirse, aşağıdaki örnekte bir header elementini ekranın tamamını kaplayacak şekilde ayarladık:

<!DOCTYPE html>
<html>
  <head>
    <style>
      /* Doğru Kullanım */
      header {
        height: 100dvh;
        background-color: #1a1a1a;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    </style>
  </head>
  <body>
    <header>
      <h1>Mobil Cihazlar İçin Uygun Tasarım</h1>
    </header>
    <section>
      <h2>İçerik Başlığı</h2>
      <p>İçerik</p>
    </section>
  </body>
</html>

Editörde Görüntüle

Yukarıdaki örnekte, header elementinin height özelliğine 100dvh değerini verdik. Ayrıca, background-color, color, display, align-items ve justify-content gibi diğer CSS özelliklerini de kullandık.

Sonuç

Mobil cihazlarda scroll sorunlarına rastlamak oldukça yaygındır. Bu nedenle, web tasarımcıları, viewport yüksekliği ve 100vh / 100dvh birimlerini doğru şekilde kullanarak, mobil cihazlarda sorunsuz bir kullanıcı deneyimi sunmalıdırlar. Ancak, desteklenmeyen tarayıcıları ve farklı ekran boyutlarını dikkate alarak, sayfanın tasarımında diğer CSS birimlerini de kullanmayı unutmamalısınız.