Siteye gelen kullanıcının mobil kullanıcı olup olmadığını denetlemek için elbetteki en güvenilir yöntem CSS Media Query'leri aracılığıyla kullanıcının ekran genişliğini denetlemek. Bunun en birinci nedeni, JavaScript'lerin bir web sayfası yüklenirken çalışan en son öğe oluşudur. Fakat, bazı mutlak durumlarda, özellikle mobile özel JavaScript'lerin çalıştırılması durumunda bu denetimin ayrıca yapılması gerekebilir.

Daha önceki “JavaScript ile Media Query Kontrolü” isimli yazımda, ekran genişliğine göre nasıl JavaScript çalıştırılabileceğini anlatmıştım. Yalnız ortada şöyle bir durum var ki, maalesef ekran çöznürlüğüne dayanarak bir cihazın mobil veya masaüstü/dizüstü cihaz olduğunu anlamak çok da mümün değil. Bunun en net örneğini genel olarak 10 inç ve üzeri büyüklükdeki tabletlerde bulunun 1200px ekran genişliği.

Bu da şunu gösteriyor eğer dayank noktamız CSS Media Query ise, maalesef kullanıcının mobil kullanıcı olduğunu anlamamız mümkün değil. İşin daha da kötü tarfı ise 1200px ekran genişliği olan tablet kullanıcısı için yapacağımız her türlü değişiklik, CSS MQ ile yapmaya devam ettiğimiz sürece, masaüstü kullanıcısına da yanasımaya devam edecek.

Buradaki çözüm ise kullanıcının siteye giriş yaptığı tarayıcının User Agent'ını yakalamak.

Mobil Tarayıcıların User Agent'ları, touch, tap, multi-touch, swipe, landscape orientation gibi bir çok olaydan dolayı, kullandığımız standart tararayıcılardan farklılık gösterir. Bu nitelikleri taşıyan bir tarayıcıyı tespit etmek için kullanacağımız yöntem aşağıdaki gibidir.

if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
            alert("Ben bir mobil cihazım!");
        }

Yukarıdaki yöntem siteye gelen kullanıcının ilgili cihazların mobil tarayıcıları ile gelip gelmediğini tespit etmek için yeterlidir. Tabii ki bu yöntem az önce bahsettiğimiz 10 inç ve üzeri tablet cihaza özel bir iş yapacağımız senaryosunda tek başına yeterli değildir. Çünkü bu denetim her mobil tarayıcı için ilgili olayları kod dizinini çalıştırmaktada kullanılacaktır.

Artık gelen cihazın mobil kullanıcı olduğunu bildiğimize göre, ekran genişliği denetimini rahatlıkla gerçekleştirebiliriz.

if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
            var ekranGenisligi = window.matchMedia("(min-width:1000px)");
            if (ekranGenisligi.matches) {
                $(document).ready(function () {
                    alert("Ben bir mobil cihazım ve ekran genişliğim 1000 pixelden büyük!");
                });
            }
        }

Yukarıdaki kod bloğu sayesinde cihazın hem mobil olduğunu, hem de ekran çözünürlüğünün 1000 pixelden büyük olduğunu yakalamış olduk. Bu sayede sadece ilgili cihaza özel script çalıştırmamız mümkün olacak.

Takipte kalın, sevgiler.