Vraag Wat is de beste manier om een ​​mobiel apparaat in jQuery te detecteren?


Is er een degelijke manier om te detecteren of een gebruiker een mobiel apparaat gebruikt in jQuery? Iets soortgelijks aan het CSS @media-attribuut? Ik wil graag een ander script uitvoeren als de browser op een draagbaar apparaat staat.

De jQuery $.browser functie is niet wat ik zoek.


1362


oorsprong


antwoorden:


In plaats van jQuery te gebruiken, kunt u eenvoudig JavaScript gebruiken om het te detecteren:

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

Of je kunt ze allebei combineren om het toegankelijker te maken via jQuery ...

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

Nu $.browser zal terugkeren "device" voor alle bovenstaande apparaten

Notitie: $.browser verwijderd op jQuery v1.9.1. Maar u kunt dit gebruiken door de jQuery-migratieplug-in te gebruiken Code


Een meer grondige versie:

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;
}

1732



Voor mij is klein mooi, dus ik gebruik deze techniek:

In CSS-bestand:

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

In jQuery / JavaScript-bestand:

$( 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
    }
 });

Mijn doel was om mijn site 'mobielvriendelijk' te maken. Dus ik gebruik CSS Media Queries tonen / verbergen elementen afhankelijk van de schermgrootte.

In mijn mobiele versie wil ik bijvoorbeeld de Facebook Like Box niet activeren, omdat het al die profielafbeeldingen en zo laadt. En dat is niet goed voor mobiele bezoekers. Dus, naast het verbergen van het container-element, doe ik dit ook in het jQuery-codeblok (hierboven):

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'));
}

Je kunt het in actie zien bij http://lisboaautentica.com

Ik ben nog steeds aan het werken aan de mobiele versie, dus het ziet er nog steeds niet uit zoals het zou moeten.

Update door dekin88

Er is een JavaScript-API ingebouwd voor het detecteren van media. In plaats van de bovenstaande oplossing te gebruiken, gebruikt u eenvoudigweg het volgende:

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

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

Browser ondersteunt:  http://caniuse.com/#feat=matchmedia

Het voordeel van deze methode is dat deze niet alleen eenvoudiger en korter is, maar dat u voorwaardelijk op verschillende apparaten zoals smartphones en tablets kunt afstemmen indien nodig zonder dat u dummy-elementen hoeft toe te voegen aan de DOM.


411



Volgens Mozilla - Browser detectie met behulp van de user agent:

Samenvattend raden we aan om overal in de User Agent de string "Mobi" te zoeken om een ​​mobiel apparaat te detecteren.

Soortgelijk:

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

Dit komt overeen met alle gangbare user-agents voor mobiele browsers, waaronder mobiel Mozilla, Safari, IE, Opera, Chrome, enz.

Update voor Android

EricL beveelt testen aan Android als een user-agent ook, als de Chrome user agent string voor tablets is "Mobi" niet inbegrepen (de telefoonversies wel):

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

176



Wat je doet door een mobiel apparaat te willen detecteren, komt een beetje te dicht in de buurt van het IMO-concept 'browser sniffing'. Het zou waarschijnlijk veel beter zijn om een ​​functieherkenning uit te voeren. Bibliotheken vinden dat leuk http://www.modernizr.com/ kan daarbij helpen.

Waar is bijvoorbeeld de grens tussen mobiel en niet-mobiel? Het wordt elke dag meer en meer wazig.


74



Een eenvoudige en effectieve one-liner:

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

De bovenstaande code houdt echter geen rekening met het geval voor laptops met een aanraakscherm. Dus, ik voorzie deze tweede versie, gebaseerd op @ Juliaanse oplossing:

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

72



Het is geen jQuery, maar ik heb dit gevonden: http://detectmobilebrowser.com/

Het biedt scripts voor het detecteren van mobiele browsers in verschillende talen, waaronder JavaScript. Dat kan u helpen met waarnaar u op zoek bent.

Omdat u jQuery gebruikt, wilt u mogelijk echter op de hoogte zijn van de jQuery.support-collectie. Het is een verzameling eigenschappen voor het detecteren van de mogelijkheden van de huidige browser. Documentatie is hier: http://api.jquery.com/jQuery.support/

Omdat ik niet weet wat je precies probeert te bereiken, weet ik niet welk van deze het nuttigst is.

Dat gezegd hebbende, denk ik dat je het beste kunt doen om een ​​ander script naar de uitvoer om te leiden of te schrijven met behulp van een taal aan de serverzijde (als dat een optie is). Omdat je de mogelijkheden van een mobiele browser x niet echt kent, zou het doen van de detectie en wijzigingslogica aan de server de meest betrouwbare methode zijn. Natuurlijk is dat allemaal een betweterpunt als je geen server-side-taal kunt gebruiken :)


59



Soms is het gewenst om te weten welk merkapparaat een klant gebruikt om inhoud te tonen die specifiek is voor dat apparaat, zoals een link naar de iPhone-winkel of de Android-markt. Modernizer is geweldig, maar laat alleen je browsermogelijkheden zien, zoals HTML5 of Flash.

Hier is mijn UserAgent-oplossing in jQuery om een ​​andere klasse weer te geven voor elk apparaattype:

/*** 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();
    }
}

Deze oplossing is van Graphics Maniacs http://graphicmaniacs.com/note/detecting-iphone-ipod-ipad-android-and-blackberry-browser-with-javascript-and-php/


45



Een oplossing gevonden in: 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());
    }
};

En om te controleren of het een mobiel is, kunt u testen met behulp van:

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

39



Als u met "mobiel" "klein scherm" bedoelt, gebruik ik dit:

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

Op de iPhone krijg je een window.screen.width van 320. Op Android krijg je een window.outerWidth van 480 (hoewel dat afhankelijk kan zijn van de Android). iPads en Android-tablets zullen nummers als 768 retourneren, zodat ze de volledige weergave krijgen zoals u zou willen.


18



Als je gebruikt Modernizr, het is heel gemakkelijk te gebruiken Modernizr.touch zoals eerder gezegd.

Ik geef echter de voorkeur aan het gebruik van een combinatie van Modernizr.touch en user agent testing, gewoon om veilig te zijn.

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
    }

Als u Modernizr niet gebruikt, kunt u eenvoudig de Modernizr.touch functie hierboven met ('ontouchstart' in document.documentElement)

Merk ook op dat u de user-agent test iemobile geeft u een breder bereik van gedetecteerde mobiele apparaten van Microsoft dan Windows Phone.

Zie ook deze ZO-vraag


14



Als u zich niet echt zorgen maakt over kleine schermen, kunt u de detectie van de breedte / hoogte gebruiken. Dus als de breedte onder een bepaalde grootte ligt, wordt de mobiele site geworpen. Het is misschien niet de perfecte manier, maar het zal waarschijnlijk het gemakkelijkst te detecteren zijn voor meerdere apparaten. Mogelijk moet je een specifieke voor de iPhone 4 plaatsen (grote resolutie).


10