pfinkbeiner / browserizr

detects your browser and platform

Browserizr

Browserizr is tiny library, that detects your browser and platform,
with testing window.navigator.userAgent and window.navigator.platform.

---

Demo

https://wezomagency.github.io/browserizr/

---

Table of contents

• Install
  • NPM
  • CDN
  • Download
  • include as module
  • include as external file
• Previous versions
• API
  • List of built-in tests
  • Generate css classes
  • Change prefixes
    • Browserizr.prefixIs
    • Browserizr.prefixIsNot

---

Install

NPM

$ npm i browserizr

CDN (unpkg.com)

<script src="https://unpkg.com/browserizr@latest/dist/browserizr.js"></script>
<!-- or minimized version -->
<script src="https://unpkg.com/browserizr@latest/dist/browserizr.min.js"></script>

Download

• browserizr.js (es6)
• browserizr.js
• browserizr.min.js

include as module

import Browserizr from 'browserizr'

include as external file

<script src="your/path/to/browserizr.js"></script>
<!-- will be added to Window, as global object Browserizr -->

---

Previous versions

please read:

• old-versions/README-2.x.md

---

API

List of built-in tests

Browserizr has detects test for:

1. Browserizr.detect().isAndroid()
2. Browserizr.detect().isAndroid3()
3. Browserizr.detect().isAndroid4()
4. Browserizr.detect().isAndroid5()
5. Browserizr.detect().isAndroid6()
6. Browserizr.detect().isAndroid7()
7. Browserizr.detect().isAndroid8()
8. Browserizr.detect().isBlackberry()
9. Browserizr.detect().isBlackberry10()
10. Browserizr.detect().isChrome()
11. Browserizr.detect().isDesktop()
12. Browserizr.detect().isEdge()
13. Browserizr.detect().isEdgeAndroid()
14. Browserizr.detect().isEdgeIOS()
15. Browserizr.detect().isIE()
16. Browserizr.detect().isIE8()
17. Browserizr.detect().isIE9()
18. Browserizr.detect().isIE10()
19. Browserizr.detect().isIE11()
20. Browserizr.detect().isIOS()
21. Browserizr.detect().isIPad()
22. Browserizr.detect().isIPod()
23. Browserizr.detect().isIPhone()
24. Browserizr.detect().isIPhone4()
25. Browserizr.detect().isIPhone5()
26. Browserizr.detect().isIPhone678() - iPhone 6/7/8
27. Browserizr.detect().isIPhone678plus() - iPhone 6/7/8 plus
28. Browserizr.detect().isIPhonex()
29. Browserizr.detect().isLinux()
30. Browserizr.detect().isMac()
31. Browserizr.detect().isMacLike()
32. Browserizr.detect().isMeizuPhone()
33. Browserizr.detect().isMeizunotePhone()
34. Browserizr.detect().isMobile()
35. Browserizr.detect().isMoz()
36. Browserizr.detect().isOpera()
37. Browserizr.detect().isRedmiPhone()
38. Browserizr.detect().isRedminotePhone()
39. Browserizr.detect().isSafari()
40. Browserizr.detect().isWindows()
41. Browserizr.detect().isWindows_xp()
42. Browserizr.detect().isWindows_vista()
43. Browserizr.detect().isWindows7()
44. Browserizr.detect().isWindows8()
45. Browserizr.detect().isWindows10()
46. Browserizr.detect().isWindowsPhone()

// you can use shorthand way

const browser = Browserizr.detect();

if (browser.isChrome()) {
  // ....
}

Generate css classes

Browserizr.detect().cssClasses(tests, cssPrefix = "", toString = true): string[]

Create array with CSS classes

Parameters:

Name	Data type	Default value	Description
tests	string[]		array of wanted tests, each name - test name without is prefix
cssPrefix	string	""	custom prefix for CSS class name

Usage examples:

const classes = Browserizr.detect().cssClasses(['Mobile', 'Desktop']);

// => ['is-mobile', 'is-not-desktop'] => if mobile device
// => ['is-not-mobile', 'is-desktop'] => if desktop

const classes = Browserizr.detect().cssClasses(['Mobile', 'Desktop'], 'browserizr-');

// => ['browserizr-is-mobile', 'browserizr-is-not-desktop'] => if mobile device
// => ['browserizr-is-not-mobile', 'browserizr-is-desktop'] => if desktop

Change prefixes

Browserizr.prefixIs

default value: 'is-'

Browserizr.detect().cssClasses(['Android']) // => 'is-android' <- default prefix

Browserizr.prefixIs = ''; // set empty
Browserizr.detect().cssClasses(['Android']) // => 'android'

Browserizr.prefixIs = 'that-is-my-'; // ;)
Browserizr.detect().cssClasses(['Android']) // => 'that-is-my-android'

Browserizr.prefixIsNot

default value: 'is-not-'

Browserizr.detect().cssClasses(['Android']) // => 'is-not-android' <- default prefix

Browserizr.prefixIs = 'no-'; // set custom
Browserizr.detect().cssClasses(['Android']) // => 'no-android'

Browserizr.prefixIs = 'that-is-not-my-'; // ;)
Browserizr.detect().cssClasses(['Android']) // => 'that-is-not-my-android'

---