[Solved-5 Solutions] Best way to detect a mobile device - javascript tutorial
Problem:
What is the best way to detect a mobile device in jQuery ?
Solution 1:
To detect mobile device is simple in javascript instead of using jquery.
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
// some code..
}
Using jQuery is more accessible.
$.browser.device = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase()));Now $.browser will return "device" for all above devices.
Note: $.browser removed on jQuery v1.9.1. But you can use this by using jQuery migration plugin Code
Solution 2:
Using CSS file:
/* Smartphones ----------- */
@media only screen and (max-width: 760px) {
#some-element { display: none; }
}
In jQuery/Javascript file:
$( 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
}
});
- Depending on the screen size to do show/hide elements by using CSS Media Queries.
- For example, In mobile version we don't want to activate the Facebook Like Box, because it loads all those profile images and stuff.
- It is not useful for mobile visitors. So, besides hiding the container element, an inside the jQuery code block:
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'));
}Solution 3:
This code is simple and effective.
function isMobile() { return ('ontouchstart' in document.documentElement); }It doesn't take into account the case for laptops with touchscreen.
function isMobile() {
try{ document.createEvent("TouchEvent"); return true; }
catch(e){ return false; }
}Solution 4:
It is desired to know which brand device a client is using in order to show content specific to that device, like a link to the iPhone store or the Android market. It Only shows browser capabilities, like HTML5, or Flash.
Here UserAgent solution in jQuery to display a different class for each device type:
/*** 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();
}
}Solution 5:
The string “Mobi” anywhere in the User Agent to detect a mobile device.
Using this code.
if (/Mobi/.test(navigator.userAgent)) {
// mobile!
}
This will match all common mobile browser like mobile Mozilla, Safari, IE, Opera, Chrome, etc.
For Android:
if (/Mobi|Android/i.test(navigator.userAgent)) {
// mobile!
}