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)