1 | # mobile-detect.js
|
2 |
|
3 | A loose port of [Mobile-Detect](https://github.com/serbanghita/Mobile-Detect) to JavaScript.
|
4 |
|
5 | This script will detect the device by comparing patterns against a given User-Agent string.
|
6 | You can find out information about the device rendering your web page:
|
7 |
|
8 | * mobile or not
|
9 | * if mobile, whether phone or tablet
|
10 | * operating system
|
11 | * [Mobile Grade (A, B, C)](http://jquerymobile.com/gbs/)
|
12 | * specific versions (e.g. WebKit)
|
13 |
|
14 | Current `master` branch is using detection logic from **Mobile-Detect@2.8.4**
|
15 |
|
16 | # Live Demo
|
17 |
|
18 | [@zeno](https://github.com/zeno) created a very nice [live-demo](https://github.com/zeno/mobile-detect-demo).
|
19 | See it in action with your device:
|
20 |
|
21 | **[Demo](http://zeno.github.io/mobile-detect-demo/)**
|
22 |
|
23 | # Usage
|
24 |
|
25 | ## Browser
|
26 |
|
27 | ```html
|
28 | <script src="mobile-detect.js"></script>
|
29 | <script>
|
30 | var md = new MobileDetect(window.navigator.userAgent);
|
31 | // ... see below
|
32 | </script>
|
33 | ```
|
34 |
|
35 | ## Node.js / Express
|
36 |
|
37 | ```js
|
38 | var MobileDetect = require('mobile-detect'),
|
39 | md = new MobileDetect(req.headers['user-agent']);
|
40 | // ... see below
|
41 | ```
|
42 |
|
43 | ## General
|
44 |
|
45 | ```js
|
46 | var md = new MobileDetect(
|
47 | 'Mozilla/5.0 (Linux; U; Android 4.0.3; en-in; SonyEricssonMT11i' +
|
48 | ' Build/4.1.A.0.562) AppleWebKit/534.30 (KHTML, like Gecko)' +
|
49 | ' Version/4.0 Mobile Safari/534.30');
|
50 |
|
51 | // more typically we would instantiate with 'window.navigator.userAgent'
|
52 | // as user-agent; this string literal is only for better understanding
|
53 |
|
54 | console.log( md.mobile() ); // 'Sony'
|
55 | console.log( md.phone() ); // 'Sony'
|
56 | console.log( md.tablet() ); // null
|
57 | console.log( md.userAgent() ); // 'Safari'
|
58 | console.log( md.os() ); // 'AndroidOS'
|
59 | console.log( md.is('iPhone') ); // false
|
60 | console.log( md.is('bot') ); // false
|
61 | console.log( md.version('Webkit') ); // 534.3
|
62 | console.log( md.versionStr('Build') ); // '4.1.A.0.562'
|
63 | console.log( md.match('playstation|xbox') ); // false
|
64 | ```
|
65 |
|
66 | ## More Info ...
|
67 |
|
68 | There is some documentation generated by JSDoc:
|
69 |
|
70 | <http://hgoebl.github.io/mobile-detect.js/doc/MobileDetect.html>
|
71 |
|
72 | ## Side Effects
|
73 |
|
74 | Script creates the global property `MobileDetect`.
|
75 |
|
76 | ## Modernizr Extension
|
77 |
|
78 | When using [Modernizr](http://modernizr.com/), you can include `mobile-detect-modernizr.js`.
|
79 | It will add the CSS classes `mobile`, `phone`, `tablet` and `mobilegradea` if applicable.
|
80 |
|
81 | You can easily extend it, e.g. `android`, `iphone`, etc.
|
82 |
|
83 | ## Size (bytes)
|
84 |
|
85 | * development: 57276
|
86 | * minified: 31629
|
87 | * minified + gzipped: 13371 (`cat mobile-detect.min.js | gzip -9f | wc -c`)
|
88 |
|
89 | # Installation
|
90 |
|
91 | ## Bower
|
92 |
|
93 | $ bower install hgoebl/mobile-detect.js --save
|
94 |
|
95 | ## Node.js / npm
|
96 |
|
97 | $ npm install mobile-detect --save
|
98 |
|
99 | ## CDN - [jsDelivr](http://www.jsdelivr.com/#!mobile-detect.js)
|
100 |
|
101 | <script src="//cdn.jsdelivr.net/mobile-detect.js/0.4.1/mobile-detect.min.js"></script>
|
102 |
|
103 | # Alternatives / Infos
|
104 |
|
105 | Often device detection is the first solution in your mind. Please consider looking for other solutions
|
106 | like media queries and feature detection (e.g. w/ Modernizr). Maybe there are better (simpler, smaller,
|
107 | faster) device detection libraries, so here you have a list (order has no meaning apart from first element):
|
108 |
|
109 | * [Modernizr](http://modernizr.com/)
|
110 | In most cases the better solution: don't use knowledge about device and version, but detect features
|
111 | (touch, canvas, ...)
|
112 | * [Mozilla Hacks - User-Agent detection, history and checklist](https://hacks.mozilla.org/2013/09/user-agent-detection-history-and-checklist/)
|
113 | * [Mobile-Detect](https://github.com/serbanghita/Mobile-Detect)
|
114 | A lightweight PHP class for detecting mobile devices (including tablets).
|
115 | This is the "source" of this JavaScript project and if you use PHP on your server you should use it!
|
116 | * [Detect Mobile Browsers](http://detectmobilebrowsers.com/) Open source mobile phone detection in many languages
|
117 | and for Webservers (Apache, nginx, IIS). mobile-detect.js uses the code of this library as a fallback in case
|
118 | of incomplete detection regular expressions.
|
119 | * [sebarmeli / JS-Redirection-Mobile-Site](https://github.com/sebarmeli/JS-Redirection-Mobile-Site/)
|
120 | JS to handle the redirection to the mobile version of your site
|
121 | * [dmolsen/Detector](https://github.com/dmolsen/Detector)
|
122 | Detector is a simple, PHP- and JavaScript-based browser- and
|
123 | feature-detection library that can adapt to new devices & browsers
|
124 | on its own without the need to pull from a central database of browser information.
|
125 | * [matthewhudson/device.js](https://github.com/matthewhudson/device.js)
|
126 | Conditional CSS and/or JavaScript based on device operating system, orientation and type
|
127 | * [brendanlim/mobile-fu](https://github.com/brendanlim/mobile-fu)
|
128 | Automatically detect mobile requests from mobile devices in your Rails application.
|
129 | * [FormFactor](https://github.com/PaulKinlan/formfactor)
|
130 | FormFactor helps you customize your web app for different form factors, e.g. when you make
|
131 | "the mobile version", "the TV version", etc.
|
132 | * [UAParser.js](http://faisalman.github.com/ua-parser-js/)
|
133 | Lightweight JavaScript-based User-Agent String Parser
|
134 | * [MobileESP - Easily detect mobile web site visitors](http://blog.mobileesp.com/)
|
135 | * [WURFL](http://wurfl.sourceforge.net/)
|
136 | * [Handset and Tablet Detection](http://www.handsetdetection.com/)
|
137 | * [Search on microjs.com](http://microjs.com/#detect)
|
138 |
|
139 | ## Mobile-Usage Statistics
|
140 |
|
141 | If you have to provide statistics about how many and which mobile devices are hitting your web-site, you can
|
142 | generate statistics (data and views) with [hgoebl/mobile-usage](https://github.com/hgoebl/mobile-usage).
|
143 | There are many hooks to customize statistical calculation to your needs.
|
144 |
|
145 |
|
146 | # License
|
147 |
|
148 | MIT-License (see LICENSE file).
|
149 |
|
150 |
|
151 | # Contributing
|
152 |
|
153 | Your contribution is welcome.
|
154 | If you want new devices to be supported, please contribute to
|
155 | [Mobile-Detect](https://github.com/serbanghita/Mobile-Detect) instead.
|
156 |
|
157 | To run generate-script it is necessary to have [Mobile-Detect](https://github.com/serbanghita/Mobile-Detect)
|
158 | as a sibling directory to mobile-detect.js/.
|
159 | (I tried to use `git subtree` but had some problems on Mac OS X - probably my fault...)
|
160 |
|
161 | * fork or clone serbanghita/Mobile-Detect
|
162 | * fork hgoebl/mobile-detect.js
|
163 | * run `npm install`
|
164 | * create branch
|
165 | * make changes and run `grunt` (needs PHP >= 5.4 in your path)
|
166 | * run browser test (tests/SpecRunner.html)
|
167 | * commit, push to your branch
|
168 | * create pull request
|
169 |
|
170 | ## Testing
|
171 |
|
172 | ### Browser
|
173 |
|
174 | Open `tests/SpecRunner.html` in different browsers.
|
175 |
|
176 | ### Node.js
|
177 |
|
178 | $ npm test
|
179 | $ # or
|
180 | $ grunt jasmine_node
|
181 |
|
182 |
|
183 | # Donations
|
184 |
|
185 | If you want, you can donate to [Mobile-Detect](https://github.com/serbanghita/Mobile-Detect).
|
186 |
|
187 |
|
188 | # TODO
|
189 |
|
190 | * Extend RegEx patterns so that test passes
|