JavaScript ile Navigator objesi ve userAgent kullarak iPhone iPad ve iPod cihazları tespit etmek

Merhaba,

Kimi zaman uygulamanızı kullanan kullanıcının hangi platformdan girdiğini bilmek ve genellikle uygulama arayüzünüzü buna göre düzenlemek isteyebilirsiniz. Bu gibi durumlarda javascript’te bulunan Navigator  objesi size ziyaretçi hakkındaki öğrenmek isteyeceiğiniz bazı bilgileri verecektir.

Navigator objesini consola bastığınızda aşağıdaki gibi bir hash görmeniz gerekir;

console.log(navigator);
  1. appCodeName: “Mozilla”
  2. appName: “Netscape”
  3. appVersion: “5.0 (X11; Linux x86_64) AppleWebKit/535.1 (KHTML, like Gecko) Chrome/14.0.835.159 Safari/535.1″
  4. cookieEnabled: true
  5. geolocation: Geolocation
  6. language: “en-US”
  7. mimeTypes: DOMMimeTypeArray
  8. onLine: true
  9. platform: “Linux i686″
  10. plugins: DOMPluginArray
  11. product: “Gecko”
  12. productSub: “20030107″
  13. userAgent: “Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/535.1 (KHTML, like Gecko) Chrome/14.0.835.159 Safari/535.1″
  14. vendor: “Google Inc.”
  15. vendorSub: “”
  16. __proto__: Navigator

Yukarıda göreceğiniz üzere her değer açıkça ne içerdiğini anlatmakta.

navigator.userAgent’i kullanmak

Konuyu kısa ve öz bir örnekle açıklıyorum;

/**
* Check is mobile for Apple products
*/
var isMobile = function() {
    try {
        return (navigator.userAgent.match(/iPhone/i))
            || (navigator.userAgent.match(/iPod/i))
            || (navigator.userAgent.match(/iPad/i)) ?
        true : false;
    } catch(e) {
        return false;
    }
};

// output true or false
console.log(isMobile());

Yukarıdaki örnekte navigator objesindeki userAgent string değerini match methud ve regex kullanarak eşleştiriyoruz ve ilgili değerimizi bulduğumuzda true yada false döndürerek kullanıcının platformunu anlamış oluyoruz. Eski ensil tarayıcılar da sorun yaşamamak veya uyumsuzlup problemi yaşamamak için kodu try/catch bloğuna almayı unutmuyoruz. Yukarıdakı navigator.userAgent.match(/XXX/i) kısmını || (OR) ile biden fazla platofmr için tekrarlayabilirsiniz.

Hepsi bu kadar.
İyi çalışmalar.

About tayfun.ozis.erikan

Web Developer, Graphic & Web Designer Zend Framework, CodeIgniter, ExtJS & Sencha Touch User Kebab Framework Developer The co-founder of lab2023 - internet technologies
This entry was posted in Akıl Defterim, JavaScript and tagged , , , , , , . Bookmark the permalink.

4 Responses to JavaScript ile Navigator objesi ve userAgent kullarak iPhone iPad ve iPod cihazları tespit etmek

  1. Serdar Yağcı says:

    Tayfun Bey, çalışmalarınızı yakından takip ediyorum. Paylaşımınız için teşekkürler.

  2. İlginiz için teşekkür ediyorum.

  3. Şu satırlar iyiymiş

    return (navigator.userAgent.match(/iPhone/i))
    || (navigator.userAgent.match(/iPod/i))
    || (navigator.userAgent.match(/iPad/i)) ?
    true : false;

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>