CSS Media Query'ler sadece projeksiyon, tarama ve yazdırma gibi çoklu-ortamlarda değil, HTML Viewport etiketi sayesinde çeşitli ekran çözünürlüklerini de bulmamız konusunda yardımcı oluyor.

Her ne kadar bu sorgular bize kullandığımız sayfaların yapısını dinamikleştirmek ve ekran çeşitli ekran çözünürlüklerine uyarlamak konusunda yardımcı olsa da, mutlak (absolute) değer alan JavaScript nesneleri iki ve/veya daha fazla ekran boyutunda uyumlu sağlayamıyor.

Örnek alarak sabit genişlik alan bir slider scriptini ele alıyorum.

$(document).ready(function () {
        $('.slider').jsSlider({
            slideWidth: 180,
        });
    });

Bu durumda ince uzun, banner şeklinde çalışan slider mobile geçince aldığı genişlikten dolayı, sağ ve solunda fazlasıyla boşluk bırakacak. Akıllı telefonların geneli için geçerli olan minimum 300px çözünürlüğü baz alarak sliderı genişletmemiz gerek.

Burada window.innerWidth, document.body.clientWidth, document.documentElement.clientWidth, window.onresize gibi JavaScript elementleri kullanmamız elbette mümkün fakat bu yöntemlerin çoğu tarayıcılar arasında uyum göstermemekte ve yahut çalışmamaktadır. Özellikle window.onresize yöntemi Internet Explorer'ın aniden göçmesine neden olmaktadır.

Çözüm ise makalenin başında bahsettiğim gibi CSS Media Query'leri ile JavaScript'i bir arada kullanmaktan geçmektedir. Buradaki anahtar noktamız ise window.matchMedia kodu. Bu kod sayesinde sayfa yüklenirken Viewport'un içerisine giden Media Query'yi yakalayıp bir kontrol oluşturmamız mümkün.

var ekranGenisligi = window.matchMedia("(max-width: 767px)");

Yukarıda oluşturduğumuz değişkeni artık istediğimiz şekilde kontrol edebiliriz. Bunun için ise basit bir if/else yazmamız yeterli olacak.

if (ekranGenisligi.matches) {
 //Ekran genişliği 767px'in altında. - Cihaz tablet ya da Akıllı Telefon
}
else {
 //Ekran genişliği 767px'in üstünde. - Cihaz masaüstü ya da dizüstü platform.
}

Biraz önceki örneğe geri dönelim ve uygulama sırasında kod bloğunu görelim.

    $(document).ready(function () {
        var ekranGenisligi = window.matchMedia("(max-width: 767px)");
        if(ekranGenisligi.matches) {
            $('.slider').jsSlider({
                slideWidth: 300,
            });
        }
        else {
            $('.slider').jsSlider({
                slideWidth: 180,
            });
        }
    });

Bu yöntemi bu şekilde kullanmanın tek dezavantajı, ilgili media query'sinin sadece sayfa yüklenirken okunmasıdır. Bu durum ise gerek duyulursa farklı JavaScript API'leri aracılığıyla giderilebilir.

Sevgiler...