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

  • Tüm cihazları tanıyamaması.
  • Yeni markalar veya modeller ortaya çıktıkça kodların da güncellenme gerekliliği.
  • 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.

YORUMLAR (5)

  1. Yunus
    Yunus
    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
      Evet o şekilde de olur. Ancak her yeni cihaz çıktığında bu cihazları takip etmeniz ve xml dosyasına eklemeniz gerekir. Bunun yerine apiyi kullanmak daha mantıklı diye düşünüyorum.
  2. Semih Çetin
    Semih Çetin
    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
      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ı yazılarından erişebilirsiniz.
  3. Erencan Sağıroğlu
    Erencan Sağıroğlu
    Yüksek trafikli sitelerde .dat dosyası okuması access violation hatasına sebep olabilir.

YORUM FORMU

Cevap verilen yorum:
  • huriye nuriye
    huriye nuriye
    çokk iyiii yaa:) ama harbiden güzel anlatılmış cok ıyı anladm ellerinize saglık