This script will detect the device by comparing patterns against a given User-Agent string. You can find out information about the device rendering your web page:
- mobile or not
- if mobile, whether phone or tablet
- operating system
- Mobile Grade (A, B, C)
- specific versions (e.g. WebKit)
master branch is using detection logic from Mobile-Detect@2.8.3
<script src="mobile-detect.js"></script> <script> var md = new MobileDetect(window.navigator.userAgent); // ... see below </script>
var MobileDetect = require('mobile-detect'), md = new MobileDetect(req.headers['user-agent']); // ... see below
var md = new MobileDetect( 'Mozilla/5.0 (Linux; U; Android 4.0.3; en-in; SonyEricssonMT11i' + ' Build/4.1.A.0.562) AppleWebKit/534.30 (KHTML, like Gecko)' + ' Version/4.0 Mobile Safari/534.30'); // more typically we would instantiate with 'window.navigator.userAgent' // as user-agent; this string literal is only for better understanding console.log( md.mobile() ); // 'Sony' console.log( md.phone() ); // 'Sony' console.log( md.tablet() ); // null console.log( md.userAgent() ); // 'Safari' console.log( md.os() ); // 'AndroidOS' console.log( md.is('iPhone') ); // false console.log( md.is('bot') ); // false console.log( md.version('Webkit') ); // 534.3 console.log( md.versionStr('Build') ); // '4.1.A.0.562' console.log( md.match('playstation|xbox') ); // false
There is some documentation generated by JSDoc:
Script creates the global property
When using Modernizr, you can include
It will add the CSS classes
mobilegradea if applicable.
You can easily extend it, e.g.
- development: 55137
- minified: 30133
- minified + gzipped: 12700 (
cat mobile-detect.min.js | gzip -9f | wc -c)
$ bower install hgoebl/mobile-detect.js --save
$ npm install mobile-detect --save
CDN - jsDelivr
Often device detection is the first solution in your mind. Please consider looking for other solutions like media queries and feature detection (e.g. w/ Modernizr). Maybe there are better (simpler, smaller, faster) device detection libraries, so here you have a list (order has no meaning apart from first element):
- Modernizr In most cases the better solution: don't use knowledge about device and version, but detect features (touch, canvas, ...)
- Mozilla Hacks - User-Agent detection, history and checklist
- Detect Mobile Browsers Open source mobile phone detection in many languages and for Webservers (Apache, nginx, IIS). mobile-detect.js uses the code of this library as a fallback in case of incomplete detection regular expressions.
- sebarmeli / JS-Redirection-Mobile-Site JS to handle the redirection to the mobile version of your site
- brendanlim/mobile-fu Automatically detect mobile requests from mobile devices in your Rails application.
- FormFactor FormFactor helps you customize your web app for different form factors, e.g. when you make "the mobile version", "the TV version", etc.
- MobileESP - Easily detect mobile web site visitors
- Handset and Tablet Detection
- Search on microjs.com
If you have to provide statistics about how many and which mobile devices are hitting your web-site, you can generate statistics (data and views) with hgoebl/mobile-usage. There are many hooks to customize statistical calculation to your needs.
MIT-License (see LICENSE file).
Your contribution is welcome. If you want new devices to be supported, please contribute to Mobile-Detect instead.
To run generate-script it is necessary to have Mobile-Detect
as a sibling directory to mobile-detect.js/.
(I tried to use
git subtree but had some problems on Mac OS X - probably my fault...)
- fork or clone serbanghita/Mobile-Detect
- fork hgoebl/mobile-detect.js
- create branch
- make changes and run
grunt(needs PHP >= 5.4 in your path)
- run browser test (tests/SpecRunner.html)
- commit, push to your branch
- create pull request
tests/SpecRunner.html in different browsers.
$ npm test $ # or $ grunt jasmine_node
If you want, you can donate to Mobile-Detect.
- Extend RegEx patterns so that test passes