ASP.Net MVC Mobile Dinamik Genişlik

Viewport etiketini sayfamıza dahil etmemizin bize sağladığı en büyük iki avantajdan bir tanesi artık sayfanın içerisine çağırdığımız nesnelere ya da oluşturduğumuz nesnelere dinamik olarak genişlik atayabilmemizdir. Klasik tasarım mantığında piksel cinsinden belirlenen genişliklere olan bağımlılığımız bu sayede minimuma inecektir. Peki dinamik genişliğin mantığı nedir?
Dinamik genişliğin bize sağladığı avantaj ekran genişliği küçülse bile nesnelerimizin buna ayak uydurabiliyor oluşudur. Şimdi aşağıdaki kodu yeni bir HTML dokümanına yazarak test edelim.

<!DOCTYPE html>

<html lang="tr" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="windows-1254" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Karayel Tasarım Mobil Projesi</title>
    <style>
        .dinamikDegil {
            width: 480px;
            margin: 10px 0px;
        }

        .dinamik {
            width: 100%;
            margin: 10px 0px;
        }
    </style>
</head>
<body>
    <div class="dinamikDegil">
        <img src="resimler/1.jpg" style="width: 480px;" />
    </div>
    <div class="dinamik">
        <img src="resimler/1.jpg" style="width: 100%;" />
    </div>
</body>
</html>

Öncelikle örneğimde kullanmak üzere 480px genişliğinde ve 360px yüksekliğinde bir görsel alıyorum ve oluşturduğum HTML dosyasını kök dizin olarak alıp içerisine oluşturduğum resimler isimli klasörüme yerleştiriyorum.
Yukarıdaki kod dizininde .dinamikDegil ve .dinamik adında iki adet CSS sınıfı oluşturduk. Bu sınıflar görev yapısı olarak:

.dinamikDegil
1) Verildiği etikete 480px genişlik atayacak,
2) Üstten ve alttan 10, yanlardan 0px kadar boşluk bırakacak,

.dinamik
1) Verildiği etikete viewport'un kendi genişliği kadar genişlik atayacak,
2) Üstten ve alttan 10, yanlardan 0px kadar boşluk bırakacak
şekilde ayarlanmıştır.

HTML yapısı içerisine girdiğimiz zaman önce dinamikDegil sınıfmız için bir

oluşturuyoruz ve sınıfmızı atıyoruz. Ardından ise içerisine görserlimizi çağırıp ona da statik olan genişliğini veriyoruz.

    <div class="dinamikDegil">
        <img src="resimler/1.jpg" style="width: 480px;" />
    </div>

İkinci adımımız ise karşılaştırmanın anlaşılabilmesi için .dinamik isimli sınıfımızı takiben gelen bir

‘e atamak. Aynı resmimizi bu sefer 100% genişlik ile buraya da çağırıyoruz.
Kodumuzu herhangi bir internet tarayıcısı ile açtığımız zaman (örneklerimde Chrome'u kullanmaktayım) karşımızda iki resmi de alt alta göreceğiz. Üstteki resim dinamik genişliğe sahip olamayan alanımıza ait. Burada görselin ekranın sol kısmında durduğunu göreceksiniz.
Dinamik olarak tanımlanmış resmimiz ise ekranın tamamını kaplamış fakat pikselleşmiş bir şekilde gelecektir.

Şimdi tam ekran modunda olan tarayıcınızı pencere moduna alın sağdan sola doğru küçültmeye başlayayın. Bu işlem sırasında dinamik olarak genişlik atanmış resmimizin ekran genişliği ile beraber küçülmeye başladığını göreceksiniz.

Küçültmeye devam edip 480 piksel kırılma noktasını geçtiğiniz zaman tarayıcınızın alt kısmında sayfa içeriği, pencere genişliğini aştığı için ortaya çıkan yatay kaydırma çubuğunu göreceksiniz. Bunun nedeni ise sabit genişliğe sahip olan resmimizdir. Ekranımız 480 piksel genişliğinin altına düştüğü zaman statik bir değere sahip olan resmimiz kullanıcı tarafından ana ekrandan taşar ve arda kalan kısımlar görüntülenemez hale gelir.

Şimdi ise .dinamikDegil sınıfını verdiğimiz alanımızı silerek aynı denemeyi yeniden yapalım. Bu durumda hiçbir şart altında ya da hiçbir kırılma noktasında yatay kaydırma çubuğunun çıkmadığını göreceksiniz. Bu sayede kullanıcıya her mobil platformlarda içeriğin tamamını tek parça halinde sunabiliyor ve kullanıcının gezinme deneyimini en iyi hale getirmiş oluyoruz.
Bu durumda kafanıza ilk takılan soru resmin büyük ekranda pikselleşmesi olacaktır. Bunun nedeni öreneği daha anlaşır hale getirmek için küçük bir görsel kullanmamızdır. Normal şartlar altında mobil tasarımdaki ana mantık her ne kadar “Önce Mobil” mantığında hareket etesek de, görseller kullanım alanlarına göre senaryolandırılmalıdır.

Yorum Yaz

Sonraki Bölümler

Makale Etiketleri