Mobil Cihazları Yakalamak ve Yönlendirmek

Günümüzde cep telefonlarının yüksek ekran çözünürlükleri ve özellikleri, ayrıca cepten internete girmenin eskilere göre çok daha ucuz ve hızlı olması neticesinde cepten internete girme olayı her geçen gün hızla artmaktadır. Bu da web sitelerinin desktop versiyonları yanında mobil cihazlar için ayrı tasarımlar sunması gerektiği gerçeğini ortaya koymaktdır. Ben de kişisel blogum için mobil tasarım geliştirdim ve deneyimlerimi sizinle paylaşacağım. Mobil sayfayı tasarlamadan önce asıl önemli olan bir nokta var. Mobil cihazları tespit etmek. Peki bunu nasıl yapacağız. Çünkü günümüzde yüzlerce modelde cep telefonu var. Ve sayıları her geçen gün artmakta.

Senaryo 1 :

UserAgent sayesinde mobil cihazlar tespit edilebilir. Bunun için olası tüm marka ve modelleri listelemek gerekir.

string strUserAgent = Request.UserAgent.ToString().ToLower();
if (strUserAgent != null)
{
    if (Request.Browser.IsMobileDevice == true || strUserAgent.Contains("iphone") || strUserAgent.Contains("blackberry") || strUserAgent.Contains("mobile") || strUserAgent.Contains("windows ce") || strUserAgent.Contains("opera mini") || strUserAgent.Contains("palm"))
    {
        Response.Redirect("DefaultMobile.aspx");
    }
}

Eğer useragent bu kelimelereden birisini içeriyorsa kullanıcı DefaultMobile.aspx sayfasına yönlendirilir. Bu yöntemin eksileri

  1. Tüm cihazları tanıyamaması.
  2. Yeni markalar veya modeller ortaya çıktıkça kodların da güncellenme gerekliliği.
  3. Cihazların ekran çözünürlüğü, desteklediği web teknolojileri gibi bilgileri elde edememe.

Senaryo 2 :

51Degrees.mobi .NET Mobile API'yi kullanma. Evet 51Degrees.mobi adlı api sayesinde yukarıda anlatılan çetrefilli işlemlere gerek kalmadan kolayca mobile cihazları tespit edebiliriz. Bunun için visual studio'da Tools > Library Package Manager > Package Manager Console menüsünü açarak "Install-Package 51Degrees.mobi" komutunu verip enter'a basıyoruz ve projemize api yükleniyor. İşlem tamamlandığında FiftyOne.Foundation.dll dosyasının referans alındığını ve App_Data klasöründe 51Degrees.mobi.config dosyasının oluşturulduğunu görebilrsiniz.Diğer bir yükleme metodu ise 51degrees.codeplex.com adresinden kaynak dosyaları indirmek. Dosya içerisinde örnek proje de mevcut. Api yüklemeyi bitirdikten sonra gelelim gerekli ayarlamaları yapmaya. App_Data klasörü içerisinde 51Degrees.mobi.config dosyasına göz attığımızda

<redirect firstRequestOnly="false"
mobileHomePageUrl="~/mobile/default.aspx"
timeout="20"
devicesFile="~/App_Data/Devices.dat"
mobilePagesRegex="mobile">
</redirect>

redirect section'ında

mobileHomePageUrl="~/mobile/default.aspx"

özelliğini kendi mobil sayfa adresinize göre değiştirebilirsiniz.

Sonuç olarak artık projemiz mobil cihazları tespit edecek ve mobil cihazlar için hazırlanan sayfaya yönlendirilecektir.

Mehmet YAYLACI
YORUMLAR (5)
  1. Yunus
    Yunus - Cevapla

    20 Şubat 2014 - 13:56

    Teşekkürler. Bu apinin yapmış olduğu işlemi bizde projemize xml ekleyip oradan okuyup karşılaştırırız. Yeni cihazlar çıktığı zaman tek yapmamız gereken xml e yeni cihazı girmek olur. Sanırım bu şekilde olur. Deneyeceğim. İyi Günler

    • Mehmet YAYLACI
      Mehmet YAYLACI - Cevapla

      20 Şubat 2014 - 15:02

      Evet o şekilde de olur. Ancak her yeni cihaz çıktığında bu cihazları takip etmen ve xml dosyasına eklemen gerekir. Bunun yerine apiyi kullanmak daha mantıklı diye düşünüyorum.

  2. Semih Çetin
    Semih Çetin - Cevapla

    28 Eylül 2015 - 21:13

    Artık gerek yok boostrap teknolojisi ile telefon tablet masaüstü diZüstü siteyi boostrap ile yaptığınızda istemci cihaz algılanıyor ve kullanıcıya istemde bulunduğu cihaza uygun web yayını geeçekleşiyor ama buna benzer bir teknoloji daha yeni çok yeni microsoft tam WPF aynı işi yapıyor. Size kalmış ama boostrap ı deneyin derim

    • Mehmet YAYLACI
      Mehmet YAYLACI - Cevapla

      29 Eylül 2015 - 10:39

      Bazı sitelerde mobil cihazlar için özel arayüz hazırlama gerekliliği hala devam edebilmektedir. Bu projeye göre değişiklik gösterebilir. Bootstrap ise Responsive tasarım esasına dayanmaktadır. Responsive tasarım ile ilgili bilgilere Responsive Tasarım Nedir? ve CSS3 Medya Sorguları makalelerinden erişebilirsiniz.

  3. Erencan Sağıroğlu
    Erencan Sağıroğlu - Cevapla

    21 Mart 2018 - 14:37

    Yüksek trafikli sitelerde .dat dosyası okuması access violation hatasına sebep olabilir.

YORUM FORMU