Simplify Device and Browser Detection With The brewser JavaScript Library

Preview:

Description:

Brewser is a lightweight JavaScript library that offers a simple, open-source solution to gather precise device information and browser capabilities.

The library goes beyond basic browser detection. It sniffs the User Agent string to provide detailed information about the device, including:

• Operating system (Windows, Mac, iOS, Android, etc.)
• Device type (phone, tablet, desktop)
• Screen orientation (portrait, landscape)
• Touchscreen support
• Browser version and specific features
• And much more

Brewser is helpful for web developers who need to adapt their sites and apps based on device and browser capabilities:

• Detect mobile vs desktop to serve responsive web design
• Check browser features like WebGL, media queries, getUserMedia to adjust experience
• Show different UI/UX for touch devices
• Detect orientation changes
• Load polyfills for older browsers
• Write conditional code paths e.g. if Chrome browser

How to use it:

1. Download the package and include the main script brewser.js on the page.

<script type="text/javascript" src="/src/brewser.js"></script>

2. Through a straightforward API, brewser allows you to tap into detailed info about the user’s device and browser, organizing this data neatly into three main categories: BREWSER.has for browser capabilities, BREWSER.device for device specifics, and BREWSER.browser for browser-related tests.

// User Agent
BREWSER.ua
// Browser Detection
BREWSER.browser.type
BREWSER.browser.version
BREWSER.browser.fullVersion
BREWSER.browser.string
BREWSER.browser.chrome
BREWSER.browser.safari
BREWSER.browser.opera
BREWSER.browser.firefox
BREWSER.browser.ie
BREWSER.browser.edge
BREWSER.browser.kindle
BREWSER.browser.other
BREWSER.browser.mobile
BREWSER.screenWidth
BREWSER.screenHeight
BREWSER.windowWidth
BREWSER.windowHeight
BREWSER.resolution
// Device Detection
BREWSER.device.os
BREWSER.device.touch
BREWSER.device.phone
BREWSER.device.tablet
BREWSER.device.desktop
BREWSER.device.orientation.portrait
BREWSER.device.orientation.landscape
// Detect device & browser capabilities
BREWSER.has.canvas
BREWSER.has.webGL
BREWSER.has.rAF
BREWSER.has.cssTransform
BREWSER.has.mediaQueries
BREWSER.has.cssTransform
BREWSER.has.getUserMedia
BREWSER.has.cssTransform
BREWSER.has.audio
BREWSER.has.cssTransform
BREWSER.has.audioApi
BREWSER.has.audioFormats.mp3
BREWSER.has.audioFormats.mp4
BREWSER.has.audioFormats.wav
BREWSER.has.audioFormats.ogg
BREWSER.has.webAudio
BREWSER.has.video
BREWSER.has.videoFormats.mp4
BREWSER.has.videoFormats.webm
BREWSER.has.videoFormats.ogg