EN
JavaScript - detect mobile device
3 points
In this article, we would like to show you how to detect mobile devices using JavaScript.
In the below examples, we use two regular expressions to test the user agent string. We check if the device is mobile or tablet and assume that any other device is a desktop type.
xxxxxxxxxx1
const MOBILE_EXPRESSION = /(android|bb\d+|meego).+mobile|armv7l|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[46]0|samsungbrowser|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i;2
const TABLET_EXPRESSION = /android|ipad|playbook|silk/i;3
4
let deviceType = null;5
6
const detectDeviceType = () => {7
if (deviceType) {8
return deviceType;9
}10
if (MOBILE_EXPRESSION.test(navigator.userAgent)) {11
return deviceType = 'mobile';12
}13
if (TABLET_EXPRESSION.test(navigator.userAgent)) {14
return deviceType = 'tablet';15
}16
return deviceType = 'desktop';17
};18
19
20
// Usage example21
22
console.log(detectDeviceType());xxxxxxxxxx1
const EXPRESSIONS = {2
// expressions order is important3
mobile: /(android|bb\d+|meego).+mobile|armv7l|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[46]0|samsungbrowser|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i,4
tablet: /android|ipad|playbook|silk/i5
};6
7
let deviceType = null;8
9
const detectDeviceType = () => {10
if (deviceType) {11
return deviceType;12
}13
const agent = navigator.userAgent;14
for (const key in EXPRESSIONS) {15
const expression = EXPRESSIONS[key];16
if (expression.test(agent)) {17
return deviceType = key;18
}19
}20
return deviceType = 'desktop';21
};22
23
24
// Usage example25
26
console.log(detectDeviceType());
xxxxxxxxxx1
const MOBILE_EXPRESSION = /(android|bb\d+|meego).+mobile|armv7l|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[46]0|samsungbrowser|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i;2
const TABLE_EXPRESSION = /android|ipad|playbook|silk/i;3
4
const detectDeviceType = (agent) => {5
if (MOBILE_EXPRESSION.test(agent)) {6
return 'mobile';7
}8
if (TABLE_EXPRESSION.test(agent)) {9
return 'tablet';10
}11
return 'desktop';12
};13
14
15
// Testing data:16
17
const agents = [18
/*19
Source: https://dirask.com/snippets/text/Example+User-Agent+values20
21
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------22
Browser + Platform User-Agent23
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------24
*/25
'Android 4.0.2 Browser ', 'Mozilla/5.0 (Linux; U; Android 4.0.2; en-us; Galaxy Nexus Build/ICL53F) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30',26
'Android 2.3 Browser ', 'Mozilla/5.0 (Linux; U; Android 2.3.6; en-us; Nexus S Build/GRK39F) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1',27
'', '',28
'BlackBerry -- BB10 ', 'Mozilla/5.0 (BB10; Touch) AppleWebKit/537.1+ (KHTML, like Gecko) Version/10.0.0.1337 Mobile Safari/537.1+',29
'BlackBerry -- PlayBook 2.1 ', 'Mozilla/5.0 (PlayBook; U; RIM Tablet OS 2.1.0; en-US) AppleWebKit/536.2+ (KHTML, like Gecko) Version/7.2.1.0 Safari/536.2+',30
'BlackBerry -- 9900 ', 'Mozilla/5.0 (BlackBerry; U; BlackBerry 9900; en-US) AppleWebKit/534.11+ (KHTML, like Gecko) Version/7.0.0.187 Mobile Safari/534.11+',31
'', '',32
'Chrome -- Android Mobile ', 'Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/%s Mobile Safari/537.36',33
'Chrome -- Android Mobile (high-end) ', 'Mozilla/5.0 (Linux; Android 10; Pixel 4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/%s Mobile Safari/537.36',34
'Chrome -- Android Tablet ', 'Mozilla/5.0 (Linux; Android 4.3; Nexus 7 Build/JSS15Q) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/%s Safari/537.36',35
'Chrome -- iPhone ', 'Mozilla/5.0 (iPhone; CPU iPhone OS 13_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/%s Mobile/15E148 Safari/604.1',36
'Chrome -- iPad ', 'Mozilla/5.0 (iPad; CPU OS 13_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/%s Mobile/15E148 Safari/604.1',37
'Chrome -- Chrome OS ', 'Mozilla/5.0 (X11; CrOS x86_64 10066.0.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/%s Safari/537.36',38
'Chomre -- Mac ', 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/%s Safari/537.36',39
'Chrome -- Windows ', 'Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/%s Safari/537.36',40
'', '',41
'Firefox -- Android Mobile ', 'Mozilla/5.0 (Android 4.4; Mobile; rv:70.0) Gecko/70.0 Firefox/70.0',42
'Firefox -- Android Tablet ', 'Mozilla/5.0 (Android 4.4; Tablet; rv:70.0) Gecko/70.0 Firefox/70.0',43
'Firefox -- iPhone ', 'Mozilla/5.0 (iPhone; CPU iPhone OS 8_3 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) FxiOS/1.0 Mobile/12F69 Safari/600.1.4',44
'Firefox -- iPad ', 'Mozilla/5.0 (iPad; CPU iPhone OS 8_3 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) FxiOS/1.0 Mobile/12F69 Safari/600.1.4',45
'Firefox -- Mac ', 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:70.0) Gecko/20100101 Firefox/70.0',46
'Firefox -- Windows ', 'Mozilla/5.0 (Windows NT 10.0; WOW64; rv:70.0) Gecko/20100101 Firefox/70.0',47
'', '',48
'Googlebot ', 'Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)',49
'Googlebot Desktop ', 'Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; Googlebot/2.1; +http://www.google.com/bot.html) Chrome/%s Safari/537.36',50
'Googlebot Smartphone ', 'Mozilla/5.0 (Linux; Android 6.0.1; Nexus 5X Build/MMB29P) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/%s Mobile Safari/537.36 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)',51
'', '',52
'Internet Explorer 11 ', 'Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; rv:11.0) like Gecko',53
'Internet Explorer 10 ', 'Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.1; WOW64; Trident/6.0)',54
'Internet Explorer 9 ', 'Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0)',55
'Internet Explorer 8 ', 'Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; Trident/4.0)',56
'Internet Explorer 7 ', 'Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0)',57
'', '',58
'Microsoft Edge (Chroimum) -- Windows ', 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/%s Safari/537.36 Edg/%s',59
'Microsoft Edge (Chromium) -- Mac ', 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Chrome/%s Safari/604.1 Edg/%s',60
'Microsoft Edge -- iPhone ', 'Mozilla/5.0 (iPhone; CPU iPhone OS 12_3_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.1.1 EdgiOS/44.5.0.10 Mobile/15E148 Safari/604.1',61
'Microsoft Edge -- iPad ', 'Mozilla/5.0 (iPad; CPU OS 12_3_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.0 EdgiOS/44.5.2 Mobile/15E148 Safari/605.1.15',62
'Microsoft Edge -- Android Mobile ', 'Mozilla/5.0 (Linux; Android 8.1.0; Pixel Build/OPM4.171019.021.D1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.109 Mobile Safari/537.36 EdgA/42.0.0.2057',63
'Microsoft Edge -- Android Tablet ', 'Mozilla/5.0 (Linux; Android 6.0.1; Nexus 7 Build/MOB30X) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.109 Safari/537.36 EdgA/42.0.0.2057',64
'Microsoft Edge (EdgeHTML) -- Windows ', 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.102 Safari/537.36 Edge/18.19042',65
'Microsoft Edge (EdgeHTML) -- XBox ', 'Mozilla/5.0 (Windows NT 10.0; Win64; x64; Xbox; Xbox One) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.102 Safari/537.36 Edge/18.19041',66
'', '',67
'Opera -- Mac ', 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.97 Safari/537.36 OPR/65.0.3467.48',68
'Opera -- Windows ', 'Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.97 Safari/537.36 OPR/65.0.3467.48',69
'Opera (Presto) -- Mac ', 'Opera/9.80 (Macintosh; Intel Mac OS X 10.9.1) Presto/2.12.388 Version/12.16',70
'Opera (Presto) -- Windows ', 'Opera/9.80 (Windows NT 6.1) Presto/2.12.388 Version/12.16',71
'Opera Mobile -- Android Mobile ', 'Opera/12.02 (Android 4.1; Linux; Opera Mobi/ADR-1111101157; U; en-US) Presto/2.9.201 Version/12.02',72
'Opera Mini -- iOS ', 'Opera/9.80 (iPhone; Opera Mini/8.0.0/34.2336; U; en) Presto/2.8.119 Version/11.10',73
'', '',74
'Safari -- iPad ', 'Mozilla/5.0 (iPad; CPU iPhone OS 13_2_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.3 Mobile/15E148 Safari/604.1',75
'Safari -- iPhone ', 'Mozilla/5.0 (iPhone; CPU iPhone OS 13_2_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.3 Mobile/15E148 Safari/604.1',76
'Safari -- Mac ', 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.3 Safari/605.1.15',77
'', '',78
'UC Browser -- Android Mobile ', 'Mozilla/5.0 (Linux; U; Android 8.1.0; en-US; Nexus 6P Build/OPM7.181205.001) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/57.0.2987.108 UCBrowser/12.11.1.1197 Mobile Safari/537.36',79
'UC Browser -- iOS ', 'Mozilla/5.0 (iPhone; CPU iPhone OS 12_1 like Mac OS X; zh-CN) AppleWebKit/537.51.1 (KHTML, like Gecko) Mobile/16B92 UCBrowser/12.1.7.1109 Mobile AliApp(TUnionSDK/0.1.20.3)',80
'UC Browser -- Windows Phone ', 'Mozilla/5.0 (compatible; MSIE 10.0; Windows Phone 8.0; Trident/6.0; IEMobile/10.0; ARM; Touch; NOKIA; Lumia 920) UCBrowser/10.1.0.563 Mobile',81
];82
83
// Testing logic:84
85
for (let i = 0; i < agents.length; i += 2) {86
const agent = agents[i + 1];87
if (agent) {88
const type = detectDeviceType(agent);89
console.log(type + '\t\t' + agents[i + 0]);90
} else {91
console.log();92
}93
}
