Inspired by the matthewhudson's DEVICE.JS repo, this library with only 4kb is able to detect the most popular devices and web browsers, making easy to write specific CSS dealing with the respective orientation or just write conditional JavaScript.
The library will attach some CSS classes to the html tag element of the document website and create a new device object attached to the global window object.
BROWSERS DETECTION:
- Chrome
- Firefox
- Safari
- MS Edge
- MSIE [10, 11]
DEVICES DETECTION:
- iPhone
- iPad
- Android (mobile and tablet)
- Windows (mobile and tablet)
- Desktop
OS DETECTION:
- iOS
- Windows
- Android
CSS classes that are added based on device and orientation.
| iPad | ios ipad tablet |
| iPhone | ios iphone mobile |
| iPod | ios ipod mobile |
| Android Phone | android mobile |
| Android Tablet | android tablet |
| Windows Phone | windows mobile |
| Windows Tablet | windows tablet |
| Desktop Chrome | desktop chrome |
| Desktop Firefox | desktop firefox |
| Desktop Safari | desktop safari |
| Desktop Edge | desktop edge |
| Desktop IE11 | desktop_ie11 |
| Desktop IE10 | desktop_ie10 |
| Orientation | CSS Classes |
|---|---|
| Landscape | landscape |
| Portrait | portrait |
For JavaScript the main device object allows you to checks the following characteristics:
| Device | JavaScript Method |
|---|---|
| Mobile | device.mobile() |
| Desktop | device.desktop() |
| Tablet | device.tablet() |
| iOS | device.ios() |
| Android | device.android() |
| Windows | device.windows() |
| iPad | device.ipad() |
| iPhone | device.iphone() |
| iPod | device.ipod() |
| Andriod Phone | device.type.androidPhone() |
| iOS Tablet | device.type.iosTablet() |
| iOS Phone | device.type.iosTablet() |
| Android Tablet | device.type.androidTablet() |
| Windows Tablet | device.type.windowsTablet() |
| Windows Phone | device.type.windowsPhone() |
| Chrome Browser | device.chrome() |
| Firefox Browser | device.firefox() |
| IE Browser | device.ie() |
| Edge Browser | device.edge() |
| Safari Browser | device.safari() |
| Safari Desktop | device.safariDesktop() |
| Safari Mobile | device.safariMobile() |
| Samsung Browser (the elusive) | device.samsungBrowser() |
| iOS Chrome Browser | device.iosChrome() |
| Android Chrome Browser | device.androidChrome() |
| Orientation | JavaScript Method |
|---|---|
| Landscape | device.landscape() |
| Portrait | device.portrait() |
| Current Orientation Name | device.getOrientation() |
| Enable Orientation on Desktops | device.activeDesktopOtientation() |
N1: As desktops computers only trigger resize event when you resize the browser window, the orientation classes feature comes disabled by default, if you need this feature on desktop you can enable it invoking the method: device.activeDesktopOtientation()
N2: This library relies on the user agent parsing approach and is not perfect. If you find any bugs please summit a ticket and I will fixed ASAP.
N3: Maybe be for some of you guys the library is lacking or missing some super cool features but keep in mind that the main idea behind this is keep everything under 5kb as a challenge.
- Fork it
- Create your feature branch
- Make change(s)
- Commit your changes
- Push to the branch
- Create new Pull Request
- Review and marge