Detect Device / Browser / Viewport Information With Using Device JS

Device.js is a JavaScript library for discovering device, display window, and browser information using regular JavaScript.

A useful small library, to get some device features, like different widths, heights, orientation, full screen, mobile or desktop, the height of navigation bar, etc.

How to make use of it:

1. Import the Device.js JavaScript library into the doc.

<script defer src="Device.min.js"></script>

// OR
import "Device.min.js";

2. API strategies & properties.

// check if is browser
// return true or false
Device.isMobile

// check if is tablet
// return true or false
Device.isTablet

// check if is desktop
// return true or false
Device.isDesktop

// check if the connection is safe (SSL)
// return true or false
Device.isSafeConnection

// check if is fullscreen mode
// return true or false 
Device.isFullScreen

// check if is landscape
// return true or false 
Device.isLandscape

// check if is portrait
// return true or false 
Device.isPortrait 

// return: { angle: 0º, type: 'landscape-primary' }
Device.orientation

// address bar size { width, height }
Device.addressBarSize

// scrollbar width
Device.scrollBarWidth

// pixel ratio of the browser
Device.pixelRatio

// the real resolution of the device screen
// return: { width, height }
Device.resolution

// return: { width, height }
Device.screenViewport

// return: { width, height }
innerViewport

// return: { width, height }
Device.outerViewport

// return: { width, height }
Device.clientViewport 

// return: { width, height }
Device.availViewport

// height of the innerViewport
Device.vh

// width of the innerViewport
Device.vW

// aspect ratio of the screen
Device.aspectRatio

// number of workers that the device has
Device.workers

// enter/exit fullscreen mode
Device.openFullScreen()
Device.closeFullScreen()
Device.fullScreen()

Detect Device/Browser/Viewport Information,Device.js Plugin/Github