Miss any of our Open RFC calls?Watch the recordings here! »

browserizr

3.2.5 • Public • Published

Browserizr

license JavaScript Style Guide npm composer WezomAgency Build Status

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

$ 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

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:


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'

Install

npm i browserizr

DownloadsWeekly Downloads

224

Version

3.2.5

License

MIT

Unpacked Size

44.3 kB

Total Files

9

Last publish

Collaborators

  • avatar