Mobil Cihaz Tespit Edip Yakalama ve Yönlendirme

Javascript Kullanarak Mobil Cihaz Tespiti



Mobil bir dünyada yaşıyoruz. Uygulamalar, web siteleri ve sosyal ağlar mobil cihazlara yönelik yazılıyor yada uyumlu çalışıyorlar. Mobil cihazların kullandığı browser sürüm ve çeşidi, işletim sistemi gibi belirleyici ana özellikler uygulamalarımızın çalışma düzenini etkileyebilmektedir. Uygulamalarda bu düzene göre değişiklik gösterebilirler.

Örneğin mobil uygulaması olan web sitesi; Android veya Ios kullanan bir cihaza göre bu uygulamanın yüklenebilir bağlantısını paylaşabilir. Android ise Play Store, Ios ise Apple Store...

Javascript ile Kullanıcının İşletim Sistemi ve Ekran Uyumluluğunu Tespit Etmek
Mobil cihaz, tablet ve masaüstü olarak gruplandırabileceğimiz cihazların tespitinde Matthew Hudson tarafından yazılan device.js javascript uygulamasını kullanacağız. Basitçe test etmek için aşağıda ki bağlantıya tıklayınız.

Device.js Cihaz Tespiti Demo

Uygulama girdiğiniz cihazın tipini, çözünürlüğünü ve işletim sistemi hakkında bilgi vermektedir. Jquery ile kullanabilmek için tepit edilen cihaz için methodları kullanmamız gerekmektedir. Device.js için tanımlı bu methodları listeleyelim;

Cihaz İçin JavaScript Değişkenleri

CihazJavaScript Değişken
Mobiledevice.mobile()
Tabletdevice.tablet()
Desktopdevice.desktop()
iOSdevice.ios()
iPaddevice.ipad()
iPhonedevice.iphone()
iPoddevice.ipod()
Androiddevice.android()
Android Phonedevice.androidPhone()
Android Tabletdevice.androidTablet()
BlackBerrydevice.blackberry()
BlackBerry Phonedevice.blackberryPhone()
BlackBerry Tabletdevice.blackberryTablet()
Windowsdevice.windows()
Windows Phonedevice.windowsPhone()
Windows Tabletdevice.windowsTablet()
Firefox OSdevice.fxos()
Firefox OS Phonedevice.fxosPhone()
Firefox OS Tabletdevice.fxosTablet()
MeeGodevice.meego()
Televisiondevice.television()

Ekran Kullanım Tipi(Yatay-Dikey)

Ekran KullanımıJavaScript Değişken
Landscapedevice.landscape()
Portraitdevice.portrait()

Örnek Uygulama;


<html>
<head>
<title>Masaüstü Tablet ve Mobil Cihazlar</title>
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/device.js/0.2.7/device.min.js"></script>
</head>
<body>

<h1>Mobil Cihaz Tespiti</h1>
<h2>Masaüstü Tablet ve Mobil Cihazlar</h2>

<script type="text/javascript">
if(!device.desktop()) {
 
 $(document).ready(function(){

 alert('Masaüstü olmayan bir cihaz kullanıyorsunuz!');
 // Buraya gerekli işlemleri girebilirsiniz.

 });

} else {

 $(document).ready(function(){

 alert('Masaüstü kullanıyorsunuz!');
 // Buraya gerekli işlemleri girebilirsiniz.

 });
}
</script>
 
</body>
</html>

Yukarıdaki örnek uygulama masaüstü olamayan cihazlar için gerekli işlemlerin yapılması gereken javascript kod bloğudur. Demo uygulamaya buradan erişebilirsiniz.

Editlemek için https://jsfiddle.net/m6fot1bm/

Device.js kendi başına jquery kütüphanesine ihtiyaç duymaz. Aslında bu javascript var olan cihaz listesini içeren kodlardır. Kullanımı basit ve işlevsel yönü açısından tercih edilebilir.

Demo' yu çalıştırdığınız da cihazınıza göre seçimi görebilirsiniz. Test için Chrome(Ctrl+Shift+I) veya Mozilla Developer araçlarında cihaz seçerek test ettiğinizde cihazın işletim sistemi, ekran kullanımının değiştiğini göreceksiniz. Bir sonraki yazıda görüşmek üzere hoşçakalın...



Php Mobil Cihaz Tespit Etmek ve Yönlendirme

Php ile mobil cihazı tespit edip yönlendirmekte mümkün. Javascript kullanılmak istenmediğinde veya proje gereği durumlarda gerekli olabiliyor.

Mobil cihazı tespit edebilmek için aşağıdaki fonksiyon kullanılır. Burada bilinen mobile cihazlar işlenmiştir. Daha sonra işlem yapmak istediğiniz uygulamaya göre fonksiyonu kullanabilirsiniz.

<?php
  // Var olan cihaz listesi için fonksiyonumuz DeviceCheck(Cihaz Tespiti)
  function DeviceCheck() {
    return preg_match("/(android|avantgo|blackberry|bolt|boost|cricket|docomo|fone|hiptop|mini|mobi|palm|phone|pie|tablet|up\.browser|up\.link|webos|wos)/i", $_SERVER["HTTP_USER_AGENT"]);
  }
  
  // Koşul ile cihaz mobil telefon ise işlem yapıyoruz.
  if(DeviceCheck()){
    echo "Mobil bir cihaz kullnıyorsunuz.";
  } else {
    echo "cihaz mobil değil";
  }

  // Cihaz mobil telefon ise farklı bir siteye yada mobil sürüm olan alt alan adına yönlendirebiliriz.
  if(DeviceCheck()) {
    header("Location: http://mobil.siteadresi.com/");
  }
?>

Htaccess İle Mobil Cihazı Yönlendirme

Kod ile işleminiz yok ve direk olarak kullanıcıları mobil görünürlüğü olan bir alan adına veya alt alan adına yönlendirmek istiyorsanız aşağıda ki kodları .htaccess dosyanıza eklemeniz yeterli. Uygulama için Shaun Russell' e yazımızda yer verelim ve teşekkür edelim. Htaccess ile beraber mobil tespit ve yönlendirme ile ilgili 3 farklı yöntemi ele almış olduk. Uygulamaya bağlı olarak javascript, php ve .htaccess ile mobil cihazları yönetebiliriz. Başka yazıda görüşünceye dek hoşça kalın :)

RewriteEngine on
RewriteBase /
# Check if this is the noredirect query string
RewriteCond %{QUERY_STRING} (^|&)m=0(&|$)
# Set a cookie, and skip the next rule
RewriteRule ^ - [CO=mredir:0:www.website.com]

# Check if this looks like a mobile device
# (You could add another [OR] to the second one and add in what you
#  had to check, but I believe most mobile devices should send at
#  least one of these headers)
RewriteCond %{HTTP:x-wap-profile} !^$ [OR]
RewriteCond %{HTTP:Profile}       !^$ [OR]
RewriteCond %{HTTP_USER_AGENT} "acs|alav|alca|amoi|audi|aste|avan|benq|bird|blac|blaz|brew|cell|cldc|cmd-" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "dang|doco|eric|hipt|inno|ipaq|java|jigs|kddi|keji|leno|lg-c|lg-d|lg-g|lge-" [NC,OR]
RewriteCond %{HTTP_USER_AGENT}  "maui|maxo|midp|mits|mmef|mobi|mot-|moto|mwbp|nec-|newt|noki|opwv" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "palm|pana|pant|pdxg|phil|play|pluc|port|prox|qtek|qwap|sage|sams|sany" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "sch-|sec-|send|seri|sgh-|shar|sie-|siem|smal|smar|sony|sph-|symb|t-mo" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "teli|tim-|tosh|tsm-|upg1|upsi|vk-v|voda|w3cs|wap-|wapa|wapi" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "wapp|wapr|webc|winw|winw|xda|xda-" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "up.browser|up.link|windowssce|iemobile|mini|mmp" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "symbian|midp|wap|phone|pocket|mobile|pda|psp" [NC]
RewriteCond %{HTTP_USER_AGENT} !macintosh [NC]

# Check if we're not already on the mobile site
RewriteCond %{HTTP_HOST}          !^m\.
# Can not read and write cookie in same request, must duplicate condition
RewriteCond %{QUERY_STRING} !(^|&)m=0(&|$) 

# Check to make sure we haven't set the cookie before
RewriteCond %{HTTP_COOKIE}        !^.*mredir=0.*$ [NC]

# Now redirect to the mobile site
RewriteRule ^ http://m.website.com [R,L]

KAYNAKLAR
http://stackoverflow.com/questions/3680463/mobile-redirect-using-htaccess
http://www.inmotionhosting.com/support/website/redirects/mobile-redirect
http://stackoverflow.com/questions/3680463/mobile-redirect-using-htaccess
https://developers.google.com/webmasters/mobile-sites/mobile-seo/separate-urls#bidirectional-vs-unidirectional-redirects
https://css-tricks.com/snippets/javascript/redirect-mobile-devices/

0 yorum

Yorumda bulunarak kendin için, senden sonrakiler için ve bu blog için bir şeyler yazabilirsin. Durma sor, paylaş. Buraya bir hatıra bırak ;)

HTML: Bazı HTML etiketlerini kullanabilirsiniz.(b,a,i vb.)
UYARI: Yorumlar onaylanmadan direk yayınlanıyor. Yorumunuzun yayında kalması için etik kurallara dikkat edelim.

© Php, E-Ticaret ve Web Programlama
Blogger ozkistyle programmer theme
Released under Creative Commons 3.0 CC BY-NC 3.0