Bir mobil cihazı tespit etmenin en iyi yolu nedir?

Bir kullanıcının jQuery'de bir mobil cihaz kullanıp kullanmadığını belirlemenin sağlam bir yolu var mı? CSS @ medya özelliğine benzer bir şey mi var? Tarayıcı bir elde taşınır cihazda ise farklı bir komut dosyası çalıştırmak istiyorum.

JQuery $.browserişlevi aradığım şey değil.

Editörün notu: kullanıcı aracısı algılama, modern web uygulamaları için önerilen bir teknik değildir. Bu gerçeğin doğrulanması için bu cevabın altındaki yorumlara bakınız. Özellik algılama ve / veya medya sorgularını kullanarak diğer yanıtlardan birini kullanmanız önerilir.

JQuery kullanmak yerine onu algılamak için basit JavaScript kullanabilirsiniz:

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
 // some code..
}

Veya ikisini birleştirerek jQuery aracılığıyla daha erişilebilir olmasını sağlayabilirsiniz ...

$.browser.device = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase()));

Şimdi yukarıdaki tüm cihazlar için $.browsergeri dönecek"device"

Not: jQuery v1.9.1 sürümünden$.browser kaldırılmıştır . Ancak bunu jQuery geçiş eklentisi Kodunu kullanarak kullanabilirsiniz

Daha kapsamlı bir sürüm:

var isMobile = false; //initiate as false
// device detection
if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent) 
    || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(navigator.userAgent.substr(0,4))) { 
    isMobile = true;
}

Benim için küçük güzel, bu yüzden bu tekniği kullanıyorum:

CSS dosyasında:

/* Smartphones ----------- */
@media only screen and (max-width: 760px) {
  #some-element { display: none; }
}

JQuery / JavaScript dosyasında:

$( document ).ready(function() {      
    var is_mobile = false;

    if( $('#some-element').css('display')=='none') {
        is_mobile = true;       
    }

    // now i can use is_mobile to run javascript conditionally

    if (is_mobile == true) {
        //Conditional script here
    }
 });

Amacım sitemin "mobil uyumlu" olmasını sağlamaktı. Bu yüzden ekran boyutuna bağlı olarak öğeleri göstermek / gizlemek için CSS Medya Sorguları kullanıyorum.

Örneğin, mobil sürümümde Facebook Beğen Kutusu'nu etkinleştirmek istemiyorum, çünkü tüm bu profil resimlerini ve malzemelerini yüklüyor. Ve bu mobil ziyaretçiler için iyi değil. Yani, konteyner eleman gizleme yanı sıra, ben de bunu jQuery kod bloğu içinde (yukarıda):

if(!is_mobile) {
    (function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/pt_PT/all.js#xfbml=1&appId=210731252294735";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
}

Http://lisboaautentica.com adresinde çalışırken görebilirsiniz.

Hala mobil versiyon üzerinde çalışıyorum, bu yüzden yazarken hala olması gerektiği gibi görünmüyor.

Dekin88 tarafından güncelleme

Medya algılamak için yerleşik bir JavaScript API'sı vardır. Yukarıdaki çözümü kullanmak yerine aşağıdakileri kullanmanız yeterlidir:

$(function() {      
    let isMobile = window.matchMedia("only screen and (max-width: 760px)").matches;

    if (isMobile) {
        //Conditional script here
    }
 });

Tarayıcı Destekleri: http://caniuse.com/#feat=matchmedia

Bu yöntemin avantajı, sadece daha basit ve daha kısa değil, aynı zamanda DOM'a herhangi bir kukla öğe eklemek zorunda kalmadan, gerekirse akıllı telefonlar ve tabletler gibi farklı cihazları da ayrı ayrı hedefleyebilmenizdir.

Mozilla - Kullanıcı aracısını kullanarak tarayıcı algılamaya göre :

Özetle, bir mobil cihazı algılamak için Kullanıcı Aracısının herhangi bir yerinde “Mobi” dizesini aramanızı öneririz.

Bunun gibi:

if (/Mobi/.test(navigator.userAgent)) {
    // mobile!
}

Bu, mobil Mozilla, Safari, IE, Opera, Chrome vb. Dahil olmak üzere tüm yaygın mobil tarayıcı kullanıcı aracılarıyla eşleşir.

Android için güncelleme

Tabletler Androidiçin Chrome kullanıcı aracısı dizesi "Mobi" içermediğinden EricL , kullanıcı aracısı olarak da test edilmesini önerir (ancak telefon sürümleri bunu yapar):

if (/Mobi|Android/i.test(navigator.userAgent)) {
    // mobile!
}

Basit ve etkili bir astar:

function isMobile() { return ('ontouchstart' in document.documentElement); }

Ancak yukarıdaki kod, dokunmatik ekranlı dizüstü bilgisayarlar için geçerli değildir. Böylece, @Julian çözümüne dayanan bu ikinci sürümü sağlarım :

function isMobile() {
  try{ document.createEvent("TouchEvent"); return true; }
  catch(e){ return false; }
}

Bir mobil cihazı tespit etmek için yaptığınız şey bir "tarayıcı koklama" kavramı IMO'suna biraz fazla yaklaşıyor. Bazı özellik algılamaları yapmak çok daha iyi olur. Http://www.modernizr.com/ gibi kütüphaneler bu konuda yardımcı olabilir.

Örneğin, mobil ve mobil olmayan arasındaki hat nerede? Her geçen gün daha da bulanıklaşıyor.

JQuery değil, ama bunu buldum: http://detectmobilebrowser.com/

Biri JavaScript olan mobil tarayıcıları algılamak için komut dosyaları sağlar. Bu, aradığınız şeyde size yardımcı olabilir.

Ancak, jQuery kullandığınız için, jQuery.support koleksiyonundan haberdar olmak isteyebilirsiniz. Mevcut tarayıcının yeteneklerini tespit etmek için bir özellik koleksiyonu. Belgeler burada: http://api.jquery.com/jQuery.support/

Tam olarak neyi başarmaya çalıştığınızı bilmediğimden, hangisinin en faydalı olacağını bilmiyorum.

Tüm bu söyleniyor, ben en iyi bahis ya yönlendirmek veya sunucu tarafı bir dil kullanarak çıkış için farklı bir komut dosyası yazmak olduğunu düşünüyorum (bir seçenek ise). Bir mobil tarayıcının x yeteneklerini gerçekten bilmediğiniz için, sunucu tarafında algılama ve değişiklik mantığı yapmak en güvenilir yöntem olacaktır. Tabii ki, bir sunucu tarafı dili kullanamıyorsanız, tüm bunlar bir tartışma noktasıdır :)

Bazen bir müşterinin, iPhone mağazasına veya Android pazarına bağlantı gibi o cihaza özgü içeriği göstermek için hangi marka cihazı kullandığını bilmek istenir. Modernizer harika, ancak yalnızca HTML5 veya Flash gibi tarayıcı özelliklerini gösterir.

Her aygıt türü için farklı bir sınıf görüntülemek için jQuery benim UserAgent çözüm İşte:

/*** sniff the UA of the client and show hidden div's for that device ***/
var customizeForDevice = function(){
    var ua = navigator.userAgent;
    var checker = {
      iphone: ua.match(/(iPhone|iPod|iPad)/),
      blackberry: ua.match(/BlackBerry/),
      android: ua.match(/Android/)
    };
    if (checker.android){
        $('.android-only').show();
    }
    else if (checker.iphone){
        $('.idevice-only').show();
    }
    else if (checker.blackberry){
        $('.berry-only').show();
    }
    else {
        $('.unknown-device').show();
    }
}

Bu çözüm, Graphics Maniacs http://graphicmaniacs.com/note/detecting-iphone-ipod-ipad-android-and-blackberry-browser-with-javascript-and-php/ adresinden alınmıştır.

Şu adreste bir çözüm bulundu: http://www.abeautifulsite.net/blog/2011/11/detecting-mobile-devices-with-javascript/ .

var isMobile = {
    Android: function() {
        return navigator.userAgent.match(/Android/i);
    },
    BlackBerry: function() {
        return navigator.userAgent.match(/BlackBerry/i);
    },
    iOS: function() {
        return navigator.userAgent.match(/iPhone|iPad|iPod/i);
    },
    Opera: function() {
        return navigator.userAgent.match(/Opera Mini/i);
    },
    Windows: function() {
        return navigator.userAgent.match(/IEMobile/i);
    },
    any: function() {
        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
    }
};

Ve sonra bir Mobil olup olmadığını doğrulamak için şunu kullanarak test edebilirsiniz:

if(isMobile.any()) {
   //some code...
}

"Mobil" ile "küçük ekran" demek istiyorsanız, bunu kullanıyorum:

var windowWidth = window.screen.width < window.outerWidth ?
                  window.screen.width : window.outerWidth;
var mobile = windowWidth < 500;

İPhone'da bir window.screen.width 320 ile sonuçlanacaksınız. Android'de bir window.outerWidth 480 ile sonuçlanacaksınız (bu Android'e bağlı olabilir). iPad'ler ve Android tabletler 768 gibi sayılar döndürür, böylece tam görünümü istediğiniz gibi elde ederler.

Eğer kullanırsanız Modernizr , çok kolay kullanmaktır Modernizr.touchönce belirtildiği gibi.

Ancak, Modernizr.touchsadece güvenli olmak için bir kombinasyon ve kullanıcı aracısı testi kullanmayı tercih ederim .

var deviceAgent = navigator.userAgent.toLowerCase();

var isTouchDevice = Modernizr.touch || 
(deviceAgent.match(/(iphone|ipod|ipad)/) ||
deviceAgent.match(/(android)/)  || 
deviceAgent.match(/(iemobile)/) || 
deviceAgent.match(/iphone/i) || 
deviceAgent.match(/ipad/i) || 
deviceAgent.match(/ipod/i) || 
deviceAgent.match(/blackberry/i) || 
deviceAgent.match(/bada/i));

if (isTouchDevice) {
        //Do something touchy
    } else {
        //Can't touch this
    }

Modernizr kullanmıyorsanız, Modernizr.touchyukarıdaki işlevi basitçe('ontouchstart' in document.documentElement)

Ayrıca, kullanıcı aracısını test etmenin iemobile, size tespit edilen Microsoft mobil cihazlarından daha geniş bir aralık sunacağını unutmayın Windows Phone.

Ayrıca bu SO sorusuna bakın

Güvenemezsiniz, navigator.userAgenther cihaz gerçek işletim sistemini göstermez. Örneğin, HTC cihazımda ayarlara bağlı ("mobil sürümü kullanma" açık / kapalı). On http://my.clockodo.com , biz sadece kullanılan screen.widthküçük cihazları tespit etmek. Ne yazık ki, bazı Android sürümlerinde screen.width ile ilgili bir hata var. Bu yolu userAgent ile birleştirebilirsiniz:

if(screen.width < 500 ||
 navigator.userAgent.match(/Android/i) ||
 navigator.userAgent.match(/webOS/i) ||
 navigator.userAgent.match(/iPhone/i) ||
 navigator.userAgent.match(/iPod/i)) {
alert("This is a mobile device");
}

Bu sorunun çok fazla cevabı olduğunu biliyorum, ama gördüğüm kadarıyla kimsenin cevaba bu şekilde çözeceğime yaklaşmadığını düşünüyorum.

CSS, web belgesine uygulanan stilleri genişliğe dayandırmak için genişlik (Medya Sorguları) kullanır. JavaScript'te neden genişlik kullanılmıyor?

Örneğin, Bootstrap'ın (Önce Mobil) Medya Sorgularında 4 yakalama / kesme noktası vardır:

• Ekstra Küçük Cihazlar 768 piksel ve altıdır.
• Küçük Cihazlar 768 ila 991 piksel arasında değişir.
• Orta Aygıtlar 992 ile 1199 piksel arasında değişir.
• Büyük Cihazlar 1200 piksel ve üstüdür.

Bunu ayrıca JavaScript sorunumuzu çözmek için de kullanabiliriz.

İlk olarak, pencere boyutunu alan ve uygulamamızı hangi boyutta cihazın görüntülediğini görmemizi sağlayan bir değer döndüren bir işlev oluşturacağız:

var getBrowserWidth = function(){
    if(window.innerWidth < 768){
        // Extra Small Device
        return "xs";
    } else if(window.innerWidth < 991){
        // Small Device
        return "sm"
    } else if(window.innerWidth < 1199){
        // Medium Device
        return "md"
    } else {
        // Large Device
        return "lg"
    }
};

Şimdi fonksiyon ayarladığımıza göre, bu değeri ans store olarak adlandırabiliriz:

var device = getBrowserWidth();

Sorunuz

Tarayıcı bir elde taşınır cihazda ise farklı bir komut dosyası çalıştırmak istiyorum.

Artık aygıt bilgisine sahip olduğumuza göre, geriye kalan tek şey bir if ifadesidir:

if(device === "xs"){
  // Enter your script for handheld devices here 
}

İşte CodePen'de bir örnek: http://codepen.io/jacob-king/pen/jWEeWG

Bir javascript satırında:

var isMobile = ('ontouchstart' in document.documentElement && navigator.userAgent.match(/Mobi/));

Kullanıcı aracısı 'Mobi' içeriyorsa (MDN'ye göre) ve başlangıçta kullanılabilirse, bir mobil cihaz olması muhtemeldir.

Kimsenin güzel bir siteyi işaret etmediğine şaşırdım: http://detectmobilebrowsers.com/ Mobil algılama için farklı dillerde hazır kodlar var (ancak bunlarla sınırlı olmamak üzere):

• Apaçi
• ASP
• C #
• IIS
• JavaScript
• nginx
• PHP
• Perl
• piton
• Raylar

Tabletleri de tespit etmeniz gerekiyorsa, ek RegEx parametresi için Hakkında bölümünü kontrol etmeniz yeterlidir.

Android tabletler, iPad'ler, Kindle Fires ve PlayBooks tasarım gereği algılanmıyor. Tabletler için destek eklemek |android|ipad|playbook|silkiçin ilk normal ifadeye ekleyin .

Küçük ekranlar konusunda özellikle endişelenmiyorsanız, genişlik / yükseklik algılamayı kullanabilirsiniz. Bu şekilde genişlik belirli bir boyutun altındaysa, mobil site atılır. Mükemmel bir yol olmayabilir, ancak muhtemelen birden fazla cihaz için tespit edilmesi en kolay yol olacaktır. İPhone 4 için belirli bir tane koymanız gerekebilir (büyük çözünürlük).

Ek bir denetim katmanı eklemek için HTML5 depolama alanını mobil depolama veya masaüstü depolama kullanıp kullanmadığını tespit etmek için kullanıyorum. Tarayıcı depolamayı desteklemiyorsa, bir dizi mobil tarayıcı ismim var ve kullanıcı aracısını dizideki tarayıcılarla karşılaştırıyorum.

Oldukça basit. İşte işlevi:

// Used to detect whether the users browser is an mobile browser
function isMobile() {
    ///<summary>Detecting whether the browser is a mobile browser or desktop browser</summary>
    ///<returns>A boolean value indicating whether the browser is a mobile browser or not</returns>

    if (sessionStorage.desktop) // desktop storage 
        return false;
    else if (localStorage.mobile) // mobile storage
        return true;

    // alternative
    mobile = ['iphone','ipad','android','blackberry','nokia','opera mini','windows mobile','windows phone','iemobile','tablet','mobi']; 
    var ua=navigator.userAgent.toLowerCase();
    for (var i in mobile) if (ua.indexOf(mobile[i]) > -1) return true;

    // nothing found.. assume desktop
    return false;
}

Eğer sadece kontrol navigator.userAgenther zaman güvenilir değildir bulundu . Ayrıca kontrol edilerek daha fazla güvenilirlik elde edilebilir navigator.platform. Önceki bir cevapta yapılan basit bir değişiklik daha iyi sonuç verir:

if (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ||
   (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.platform))) {
    // some code...
}

Http://wurfl.io/ adresini kontrol etmenizi öneririm.

Özetle, küçük bir JavaScript dosyasını içe aktarırsanız:

<script type='text/javascript' src="//wurfl.io/wurfl.js"></script>

Şuna benzeyen bir JSON nesnesi kalacaksınız:

{
 "complete_device_name":"Google Nexus 7",
 "is_mobile":true,
 "form_factor":"Tablet"
}

(Bu elbette bir Nexus 7 kullandığınızı varsayar) ve aşağıdakileri yapabilirsiniz:

if(WURFL.is_mobile) {
    //dostuff();
}

Aradığın şey bu.

Feragatname: Bu ücretsiz hizmeti sunan şirket için çalışıyorum.

Bunu kontrol et yazı , bu touchstart olay denir, yapmanız dokunmatik cihazlar algılandığında yapmak ya da ne ne için gerçekten güzel bir kod parçası verecektir:

$(function(){
  if(window.Touch) {
    touch_detect.auto_detected();
  } else {
    document.ontouchstart = touch_detect.surface;
  }
}); // End loaded jQuery
var touch_detect = {
  auto_detected: function(event){
    /* add everything you want to do onLoad here (eg. activating hover controls) */
    alert('this was auto detected');
    activateTouchArea();
  },
  surface: function(event){
    /* add everything you want to do ontouchstart here (eg. drag & drop) - you can fire this in both places */
    alert('this was detected by touching');
    activateTouchArea();
  }
}; // touch_detect
function activateTouchArea(){
  /* make sure our screen doesn't scroll when we move the "touchable area" */
  var element = document.getElementById('element_id');
  element.addEventListener("touchstart", touchStart, false);
}
function touchStart(event) {
  /* modularize preventing the default behavior so we can use it again */
  event.preventDefault();
}

Mobil tarayıcıda çalışıp çalışmadığınıza dair doğru / yanlış yanıt almak için kullanabileceğiniz bir işlev. Evet, tarayıcı kokluyor, ancak bazen tam da ihtiyacınız olan şey bu.

function is_mobile() {
    var agents = ['android', 'webos', 'iphone', 'ipad', 'blackberry'];
    for(i in agents) {
        if(navigator.userAgent.match('/'+agents[i]+'/i')) {
            return true;
        }
    }
    return false;
}

Tüm yanıtlar tarayıcıyı algılamak için kullanıcı aracısı kullanır, ancak kullanıcı aracısına dayalı cihaz algılaması çok iyi bir çözüm değildir, dokunmatik cihaz gibi özellikleri tespit etmek daha iyidir ( bunun yerine yeni jQuery'de kaldırırlar $.browserve kullanırlar $.support).

Cep telefonunu algılamak için dokunma olaylarını kontrol edebilirsiniz:

function is_touch_device() {
  return 'ontouchstart' in window // works on most browsers 
      || 'onmsgesturechange' in window; // works on ie10
}

Alındığı JavaScript kullanarak bir 'dokunmatik ekran' cihazı algılamak için en iyi yolu nedir?

Aygıt türünün kullanılıp kullanılmadığını kontrol etmek için dizelerin aşağıdaki birleşimini kullanmanızı öneririm.

Gereğince Mozilla dokümantasyon dize Mobiönerilir. Ancak, bazı eski tabletler sadece Mobikullanılırsa doğru dönmez , bu nedenle kullanmalıyızTablet de dize .

Benzer şekilde, güvenli tarafta olmak iPadve iPhonetelleri de cihaz tipini kontrol etmek için kullanılabilir.

Yeni cihazların çoğu yalnızca dize trueiçin geri dönecekti Mobi.

if (/Mobi|Tablet|iPad|iPhone/.test(navigator.userAgent)) {
    // do something
}

Kolayca işleyebilmek için medya sorgusunu kullanabilirsiniz.

isMobile = function(){
    var isMobile = window.matchMedia("only screen and (max-width: 760px)");
    return isMobile.matches ? true : false
}

Harika cevap teşekkürler. Windows Phone ve Zune'u desteklemek için küçük iyileştirme:

if (navigator.userAgent.match(/Android/i) ||
  navigator.userAgent.match(/webOS/i) ||
  navigator.userAgent.match(/iPhone/i) ||
  navigator.userAgent.match(/iPad/i) ||
  navigator.userAgent.match(/iPod/i) ||
  navigator.userAgent.match(/BlackBerry/) ||
  navigator.userAgent.match(/Windows Phone/i) ||
  navigator.userAgent.match(/ZuneWP7/i)
) {
  // some code
  self.location = "top.htm";
}

Bunu kullan:

/**  * jQuery.browser.mobile (http://detectmobilebrowser.com/)  * jQuery.browser.mobile will be true if the browser is a mobile device  **/ (function(a){jQuery.browser.mobile=/android.+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|e\-|e\/|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|xda(\-|2|g)|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))})(navigator.userAgent||navigator.vendor||window.opera);

Sonra şunu kullanın:

if(jQuery.browser.mobile)
{
   console.log('You are using a mobile device!');
}
else
{
   console.log('You are not using a mobile device!');
}

Http://detectmobilebrowser.com/ temelli basit işlev

function isMobile() {
    var a = navigator.userAgent||navigator.vendor||window.opera;
    return /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4));
}

<script>
  function checkIsMobile(){
      if(navigator.userAgent.indexOf("Mobile") > 0){
        return true;
      }else{
        return false;
      }
   }
</script>

Herhangi bir tarayıcıya giderseniz ve navigator.userAgent'ı almaya çalışırsanız, tarayıcı bilgilerini aşağıdaki gibi bir şey alırız

Mozilla / 5.0 (Macintosh; Intel Mac OS X 10_13_1) AppleWebKit / 537.36 (GHTo gibi KHTML) Chrome / 64.0.3282.186 Safari / 537.36

Aynı şeyi mobil cihazlarda da takip edeceksiniz

Mozilla / 5.0 (Linux; Android 8.1.0; Pixel Build / OPP6.171019.012) AppleWebKit / 537.36 (GHTo gibi KHTML) Chrome / 61.0.3163.98 Mobil Safari / 537.36

Her mobil tarayıcı "Mobil" içeren bir dize ile useragent olacaktır Bu yüzden geçerli kullanıcı aracısının web / mobil olup olmadığını kontrol etmek için kodumda yukarıdaki snippet'i kullanıyorum. Sonuca dayanarak gerekli değişiklikleri yapacağım.

Bunu kullanıyorum

if(navigator.userAgent.search("mobile")>0 ){
         do something here
}

Mobiledetect.net ne dersiniz ?

Diğer çözümler çok basit görünüyor. Bu hafif bir PHP sınıfıdır. Mobil ortamı algılamak için belirli HTTP üstbilgileriyle birlikte User-Agent dizesini kullanır. Ayrıca, WordPress, Drupal, Joomla, Magento vb. İçin kullanılabilen 3. taraf eklentilerinden herhangi birini kullanarak Mobil Algılama'dan da yararlanabilirsiniz.

Kullanıcı aracısı dizelerine tek başına güvenilmemelidir. Aşağıdaki çözüm her durumda işe yarar.

function isMobile(a) {
  return (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0, 4)));
}

ve bu işlevi çağırın:

isMobile(navigator.userAgent || navigator.vendor || window.opera)